October 7, 2017 css javascript sass Tools 0

If you’re just like me, you definitely like the slogan: if you go (black) SASS, you can never go back. SASS can help you build beautiful CSS code in a way that you would not have imagined it a few years ago. You can use advanced features like variables, functions, and import, right alongside writing your beautiful CSS code. However, compiling SASS to CSS can take a while to set up and run, and there can be complex processes for the uninitiated in dealing with this. I will share below a very simple and efficient way not only to compile you SASS into CSS, but also to automatically prefix it with all browser and vendor prefixes, and also, to automatically minify it on the go.

In this tutorial we’ll be using the power of JavaScript to perform all of those powerful features, with Gulp, via Node.js and Node Package Manager. This might intimidate the beginners, but don’t close the browser, it’s not as complex as it sounds. There are a few simple steps that you’ll have to follow, and you’ll have everything set up in less than 10 minutes on your PC, and the good news is that you can still use your usual code editor to edit the code. All the compilation will be performed in the background, on your PC, without you even noticing it.

 

Here are the steps that you need to take to get started with Node.js and SASS:

  • Install node.js on your PC (don’t be intimidated, there is nothing complex or special about it, it’s  just a simple program)
  • Make sure that you have NPM installed (it usually comes as default with the above Node.js)
  • Install Gulp.js on your PC. Open up your terminal and type in npm install -g gulp
  • Now you’ll need to create 2 files in your root folder, with the name: package.json and gulpfile.js
  • Open up your project’s root folder, and add the code below to the package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
"name": "any-name",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
      "url": "git+https://github.com/username/repo/.git"
},
"author": "",
"license": "ISC",
"bugs": {
     "url": "https://github.com/username/repo/issues"
},
"homepage": "https://github.com/username/repo#readme",
     "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^4.0.0",
     "gulp-clean-css": "^3.9.0",
     "gulp-cssmin": "^0.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0"
}
}
  • Now open up your gulp.js file and paste the code below:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

var config = {
sass_folder : './public_html/static/scss',
css_folder : './public_html/static/css'
}
gulp.task('sass', function () {
gulp.src(config.sass_folder+'/*.scss')

.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({ browsers: ['last 12 versions'], cascade: false }))
.pipe(gulp.dest(config.css_folder));

gulp.src(config.css_folder+'/main.css')
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(config.css_folder));

});

gulp.task( 'default', [ 'sass:watch' ] );

gulp.task('sass:watch', function () {
gulp.watch(config.sass_folder+'/**/*.scss', ['sass']);

});
  •  Make sure you change your SASS folder and your CSS folder in the config, at the top of the code.
  • Now open up the terminal in your project root
  • Type in npm install
  • You will see some warnings and questions, just ignore them and press enter until it starts installing the modules
  • After everything is installed, you’re ready to go, just one more step:
  • Initiate gulp by typing in your terminal (while in the project root folder): gulp
  • Thiss will initiate Gulp for you, and the task sass:watch will be running
  • It will watch your SASS files, and everytime you save them, it will compile, prefix, and minify your CSS automatically within miliseconds