Getting Started with SASS and ASP.NET Core

0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 Flares ×

Getting started with SASS and ASP.NET Core

I’m a huge fan of Sass and have been for years, so I thought it made sense to write a short article about getting started with SASS and ASP.NET Core.

Ok so full disclosure, I actually started writing a whole other article about Getting Started SASS, Materialize CSS and ASP.NET Core, but then I thought it’d be more prudent to take a step back and write an article about getting started with SASS by itself. Not thats its an especially complicated task, but worth going through the steps!

What is SASS?

If you’re not aware SASS is a super-set of CSS that brings a bunch of features that make working with CSS much more fun and intuitive – for example you can use variables and reusable css blocks (called mixins). To learn more see the SASS website.

Creating you SASS Stylesheet

OK, so you’ve got your project set-up and now want to start introducing some SASS goodness into it. There’s several ways you can do this but personally I like to have a seperate sass folder, so:

  • Add a folder within my wwroot folder called sass.
  • Next I add my sass stylesheet into that folder, so in our example we’ll call it site.scss.
  • To keep the existing styles, copy everything out of you site.css and paste it into your site.scss file,
  • Finally delete your current site.css file

Now we just need to get gulp to start building our sass file.

Building SASS with Gulp

Adding a SASS Gulp plug-in

So you’ve got your sass file in place ready to be built – now we just need to get gulp to start building it.

First thing we need to add the sass gulp plug-in to our project. Personally I like to do add this via the command line so from your command line within your project you just need to run the following:

This will install gulp-sass as a development-time dependency. To double check that its worked you can open your package.json file and you should see gulp-sass listed in the devDependencies section. (You could just added it in here directly)

Amending you gulpfile

Next we need to update the gulpfile and add a sass compilation task:

Set-up variable: First thing is to setup your gulp-sass variable:

Setup paths: Not much to explain here. Then we need to add the sass source and destination paths to our paths variable, something like this:

One thing to note here is that I’m being very specific in that I only want the one site.scss file compiling. I could have a more general task that looked for all sass files – that would look something like this scss: webroot + "sass/**/*.scss",but personally I like to be veryspecific about what I want compiling.

Create compile task: Next we need to create our sass compile task:

The task is pretty simple really, it just takes the path specified previously, pipes it through sass, and then writes it out to the destination directory specified previously. Really simple and clean. One of the great things about this is that I could be implementing multiple sass files, and using the @import directive in my main.scss – in this case the sass compiler will compile them all into one css file. (we can even add source maps to make debugging issues easier, but thats for another day)

I also like to add another task called simply compile:

At this stage this just runs the compile:sass task, but it gives me a hook to add more compilation tasks down the road.

Create watch task: I like to have a watch task that watches all my scss files and runs then compile any time one changes. Personally I like to just kick this off in a command line window, but you can always hook it up to lifecycle binding in visual studio.

Again another simple task that just watches for changes in my main scss file, and compiles. If I’m using multiple source scss files I might change the source to something more like webroot + "sass/**/*.scss", so it picks up changes in any sass file.

When doing development I just open up a command prompt in my project directory and start the watch:

Amending your project.json

Ok the last thing to do is update your project.json file so that the compile is also part of your standard publish pipeline. To do this find the scripts//prepublish section in your project.json file, it should look something like this:

Above is the standard prepublish scripts (at time of this writing).

Just amend this by adding the gulp compile call after clean, but before minify, like this:

Wrapping up

Sass is great, and compiling it using gulp is really pretty simple. Sass brings so much helpful functionality into css making working with it that much easier. Compiling with gulp also opens up a world of possibilities such as automatically doing vendor prefixing, adding source maps and various other things (like automatic spritesheets).

This guide should help take the first steps into sass and gulp, and hopefully open a host of possibilities.

The Essential App Marketing Kit
Subscribe To My Newsletter To Get an Entire Chapter From The Book for FREE
Never display this again
0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 Flares ×