Learn SASS for CSS

by Koree S. Monteloyola

 

Sass Tutorial for CSS by Tekinoypi

If you have been developing websites for quite some time, I'm sure you have noticed that some of your CSS (Cascading Style Sheets) are getting longer or more complex, which means code maintenance is also getting harder, right?

One way to DRY (Don't Repeat Yourself) in CSS coding is by using Sass (Syntactically Awesome Stylesheets).

I came across Sass because of one of my web development projects for Magento templating is using it by default.

Sass is a stylesheet scripting language that is interpreted by a preprocessor into an ordinary CSS. Some features of Sass are variables, nesting, mixins, partials with imports, control directives, expressions and more.

This article will provide you the basic instructions and examples to help you kickstart learning and using Sass in your web development projects.

Installing Sass

You could either install it through command line or an application. First things first, you should install Ruby before installing the Sass gems.

For Linux

Install Ruby first then execute this command

sudo su -c "gem install sass"

For Windows

Install Ruby first using the RubyInstaller for Windows, follow the commands below to complete Sass installation.

For Mac

Ruby is pre-installed in Mac, follow the commands below to complete Sass installation.

Command Line Sass Installation

  1. Open terminal or command prompt
  2. Execute this command to install Sass
    sudo gem install sass
  3. Check if it is working. You should see Sass's version.
    sass -v

Syntaxes

Sass has 2 syntaxes:

  1. SCSS (Sassy CSS)
    • File extension is *.scss
    • This is actually a CSS3 syntax extension
    • Valid CSS3, means valid SCSS
    • Supports CSS hacks, vendor specific syntax, old IE filter syntax.
  2. SASS
    • File extension is *.sass
    • Uses the older indented syntax, means indentation is preferred vs. brackets
    • Uses newlines, not semi-colons
    • Quicker to write and easier to read

For this article we are going to use the SCSS syntax, which is the preferred/default syntax of Sass.

Your First Sass Project

Create a project folder named "sass-tutorial". Within the "sass-tutorial" folder, create 2 files:

  1. _varsconstants.scss (preceding a file with an underscore means Sass will ignore it and NOT compile it to a CSS file.)
  2. style.scss

Next, open and edit your _varsconstants.scss to add your variables. The variable "$weather" will be used for a Sass Mixin code example, which can be found at the bottom of this tutorial.

$primaryFont: Helvetica, sans-serif; 
$primaryFontColor: #666; 
$percent100: 100%;
$weather: sunny;

Next, open and edit your style.scss to this:

/*
*Partials with Import directive
*/
@import 'varsconstants';


/*
*Variables
*/
body {
  font: $percent100 $primaryFont;
  color: $primaryFontColor; }

Your style.scss demonstrates how to use Partials with Import directive and  Sass variables.

Next, to create a CSS file from SCSS you should open a terminal or command prompt and make sure your current directory is in "sass-tutorial" then execute this command:

sass style.scss style.css

Congratulations! You have just created your CSS file, and it should look like this:

/*
*Partials with Import directive
*/
/*
*Variables
*/
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

Other Usefull Sass Commands

You can also convert your SCSS files to SASS syntax:

sass-convert style.scss style.sass

and vice versa:

sass-convert style.sass style.scss

You can also watch a folder for changes so it automatically interprets your SCSS file to CSS, just use this code:

sass --watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: style.scss
      write style.css
      write style.css.map

Sass also has 4 styles for your CSS output, it can be nested, expanded, compact or compressed. The example below shows how to use the compressed style, which is not meant for human reading.

sass style.scss style.css --style compressed

Using a Sass GUI Appliction: Koala

If you are not comfortable in using Sass through command line, you can use several Sass GUI applications. I've tried using Koala (for Mac) which is an open-source GUI app for Sass, Less and Compass. Here is a screen capture for Koala's interface.

Koala GUI Sass screenshot

 

More Sass Examples: Mixins and if Control Directive

These are just some of the COOL examples that I saw from Sass's documentation and found useful for some of my websites.

Mixins
SCSS

@mixin border-radius($radius) {
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
}


.box { @include border-radius(10px); }
CSS

.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px; }

if Control Directive
SCSS

p {
 @if $weather == sunny {
  color: blue;
 } @else if $weather == cloudy {
  color: #ccc;
 } @else if $weather == rainy {
  color: #666;
 } @else {
  color: #000;
 }
}
CSS
p {
  color: blue; }

 

For more examples here is a zip file of a SCSS file and its interpreted CSS file for your reference. I hope this tutorial has helped you to understand and integrate Sass to your web projects.

Happy coding!

Category: CSS, Tutorials, Web