Getting Started using SASS CSS preprocessor

More complex CSS, need more effort to maintain CSS syntax. That why we need CSS preprocessor for making CSS easy to maintain and expanded. Existing, stable and famous CSS preprocessor are SASS, STYLUS and LESS. Now, we about learn SASS CSS preprocessor by examples. That's mean we are learning from scratch.

There is two code syntax of SASS. One with bracket and semicolon that's calls SCSS, the other is without semicolon and bracket that's call SASS it self. SCSS are made for front end developer that familiar with CSS. You can find SCSS in our Ionic 2 hybrid mobile app tutorial.

1. Installing SASS

Before installing SASS, we should install Ruby first. You can refer to Ruby official site for installing Ruby on various platforms.

Now, jump to the SASS. After all required tools installed, we are going to installing SASS. Open terminal or command, in Windows can use Ruby command line (CLI). Type this command.

gem install sass

or

sudo gem install sass

That command will install SASS and it's dependencies. To check the installation simply type this command.

sass -v

That will result something like this.

Sass 3.4.22 (Selective Steve)

Congratulation! now, your SASS is ready to use.

2. Using SASS

Usually SASS files put in "app/sass" or "app/scss" folder inside project folder and CSS result put in "www/css" or "public/css". Otherwise, you can put that files whatever you like as the requirements of your project.

In this example, let's make a web project folder. In the terminal or command go to your projects folder.

mkdir sass-example
cd sass-example

Then create this folders in root folder of project folder.

mkdir app
mkdir app/sass
mkdir www
mkdir www/css

Now, we can working on "app/sass" folder. Create new SASS file in that folder.

touch app/sass/main.sass

Open and edit "app/sass/main.sass" file using your favorites text editor or IDE. Add this lines of SASS syntax.

$font-stack:    Arial, sans-serif
$primary-color: #555

body
  font: 100% $font-stack
  color: $primary-color

Now, run this command to compile SASS file to be CSS file.

sass app/sass/main.sass www/css/main.css

Take a look at compiled CSS file, it should be like this.

body {
  font: 100% Arial, sans-serif;
  color: #555; }

/*# sourceMappingURL=main.css.map */

To monitoring changes in SASS syntax and see lively as CSS, simply run this command.

sass --watch app/sass/main.sass:www/css/main.css

That's it for getting started guide, next we will cover SASS usage in more deeply.

Please leave your comment, suggestion or critic below to improve this tutorial.

Thanks.