Stupid Easy Instructions To Implement SASS into your Visual Studio Project

I found that there are still many developers not using a CSS preprocessor to simplify their web development when it comes to styling.  You don’t have to be a “front-end” guy to do it and it actually does make life way more simple.  Dare I say that you might actually enjoy working on styles?

Obligatory Definition

I will keep this short,  what is SASS?  SASS stands for syntactically awesome stylesheets.  SASS allows you to add some programmatic sugar to your stylesheets to make them more maintainable and easier to use.  I won’t go into all of the things you can do with SASS in this post but if you’re really interested you can learn more about it here.

Setting it up in Visual Studio 2017

These instructions will be using NPM and Gulp.

Step One

In Visual Studio, you first have to create a package.json file to import all of the packages you’ll need to implement SASS.  This should go in your application root.

{
 "name": "StupidEasySass",
 "version": "1.1.1",
 "description": "Startup Guide on SASS",
 "dependencies": {
 "gulp": "3.9.1",
 "gulp-concat": "2.6.1",
 "gulp-clean-css": "3.7.0",
 "gulp-rename": "1.2.2",
 "gulp-sass": "3.1.0"
 }
}

Step Two

Then you’ll you have to create a gulpfile.js in your application root and import all of the gulp apps you’ll be using.

var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');

gulp.task('default', ['sass']);
gulp.task('sass', function (done) {
 gulp.src('./Content/scss/**/*.scss')
 .pipe(sass())
 .on('error', sass.logError)
 .pipe(rename('styles.css'))
 .pipe(gulp.dest('./Content/'))
 .pipe(cleanCSS({
 keepSpecialComments: 0
 }))
 .pipe(rename('styles.min.css'))
 .pipe(gulp.dest('./Content/'))
 .on('end', done);
});

gulp.task('sass:watch',  function  ()  {
 gulp.watch('./Content/scss/**/*.scss',  ['sass']);
});

So what is the above doing:

  • Each Gulp Task will show up as an item to run in your Task Runner Explorer found in Visual Studio. (You can find this under View -> Other Windows).  When you click on these it will start a task and run to completion
  • The gulp task labelled sass, actually runs the preprocessor to generate your .css files based on your .scss (SASS files)
  • The sass task is reading all of the .scss files in the source folders,  processing them through the SASS processor, renaming them to your CSS file and spitting it out to the destination.
  • The task is then minifying the css, renaming the output and saving it in the same location.

There is also another task called sass:watch.  This gulp task once started, will watch the scss folder for changes, if it detects one, it will automatically updates the CSS files and all you need to do is refresh your page.

That’s It!

So those are the stupid easy instructions on how to setup SASS in your Visual Studio project using Gulp and NPM.  I’ve even created a basic project using the default MVC project template in Visual Studio 2017.  You only need to pay attention to Content Folder, gulpfile.js, and package.json.  You can find the GitHub project below:

https://github.com/bwhittington/StupidEasySass

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s