An Introductory Guide for starting out with SASS for CSS

SASS and LESS are two similar tools for writing out CSS code that is sort of pre-CSS code with variables – that is then converted to good ole regular CSS code.

Why you would want to use them really depends on your workflow, for smaller scale work and minor CSS updates it probably isn’t necessary but for mid-large new projects and work which involves team collaboration the benefits seem to become evident.

Working in SASS you write out CSS sort of in the same way, but by also setting and using variables in the CSS, you then recompile or convert that format which is SASS into CSS.

The first thing you need to do is get SASS installed which runs on top of Ruby, the 2nd thing to do is get support in your text editor for SASS which can than help with code hinting and code completion.

A couple of popular text editors, Sublime Text and TextMate have a package that can be installed to do all the code completion – follow the instructions here to get that sorted.

With the starting blocks in place lets look at what we can do in SASS with variables, nested styles, mixins and numeric operators.

Watching the SASS folder

When you have SASS successfully installed just create a directory that you are going to work in, create a file called whatever you like with a .scss suffix and watch the folder by issuing a command on the command line, so in my example I have a folder named sass in my home folder and from there any .scss files will be converted to regular .css files each time I save them, so from the Terminal type:

sass --watch ~/sass/

neilg@[~/sass]: sass --watch sass/
>>>  Sass is watching for changes. Press Ctrl-C to stop.

Variables

Variables are placeholders that just use the 1 value set which can then be re-used later in the CSS code.

Variables are declared in SASS with a $ prefix and then the variable name followed by a colon, then the value and finished with a semicolon pretty much like regular CSS definitions but without the curly braces. The variable name can start with a letter or underscore but not a number, but can include numbers. The variables used in the examples below are formatted in camel case which is a preferred way of working with variable definitions in Javascript, subsequent words starting with an initial capital.

Variables can include pretty much all you need in CSS and you can declare them like so:

/*Variables .scss*/

$myColor:#545445; // Single CSS Value
$myOtherColor:#999; // Single CSS Value
$myMargin:0 auto; // Multiple values
$myBorder:2px solid #999; // Multiple values
$myContentAfter:" this goes after" // Pseudo selector

So above you see how you can have single or multiple CSS values and even the pseudo before and after elements.

After setting the variables, you can then use them in the CSS code like so:

/*Variables .scss*/

div h2 {
 color: $myColor;
}
p {
 color:$myOtherColor;
}
ul {
 color:$myColor;
}
header {
 border:$myBorder;
 margin:$myMargin;
}
header::after{
 content:$myContentAfter;
}

Each time you save your .scss document SASS will initially create a similar named file with a .css extension and update it on each save you make on your .scss file, if you make an error in your syntax you will get the error message in the .cssfile.
So when the above file is saved the below will be the contents of the .css file.

/*Variables .css*/

div h2 {
  color: #545454; }

p {
  color: #666666; }

ul {
  color: #545454; }

header {
  border: 2px solid #999999;
  margin: margin auto; }

header::after {
  content: " this goes after"; }

Nested Styles

Nested styles are like Media Queries in a way but instead of targetting a viewport size you are targetting an element and applying styles to that element.

Take for example the code block below:

/*Nested styles .scss*/

.content {
font-family:Times,sans-serif;
p {font-family:Helvetica,serif;}
a {color:#565656; &:hover{color:#8888;}}
}

The target is a class called .content and can have regular styles applied to it such as above the first line declares its font-family – but then it has nested styles for the p and a elements which declare their own styles but within the outer classstyle.

Also note the pseudo hover element is appended to the a element with an ampersand and has its style further nested in the a element which is nested in the .content element. Think russian dolls. This would translate in the CSS file like so:

/*Nested Styles .css*/

.content {
  font-family: Times,sans-serif; }
  .content p {
    font-family: Helvetica,serif; }
  .content a {
    color: #565656; }
    .content a:hover {
      color: #8888; }

Mixins

Mixins sounds a lot worse that its bite – Mixins are just another type of variable, you basically declare a bunch of styles in a type of class and reuse them later in another bunch of styles using just the initial placeholder name.

So declaring a Mixin is using @mixin plus the placeholder name, kind of like a class but without a dot prefix.

/*Mixins .scss*/

@mixin myBorder {
	padding: 0 1%;
	margin: 30px 2%;
}

Reuse the Mixin later down the track in the .scss file by using the @include and the placeholder name – again without a leading dot.

/*Mixins .scss*/

.mysuperblockotext {
	font-family:Arial, sans-serif;
	font-size: 1rem;
	@include myBorder;
}

This will translate like so in the .css file:

/* Mixins .css*/

.mysuperblockotext {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  padding: 0 1%;
  margin: 30px 2%; }

Numerical Operators

You can use the basic + – * and / symbols for addition, subtraction, multiplication and division in SASS.

/* Numerical Operators .scss*/

$fontBlock:12px;

.myfonts {
	font-size:$fontBlock +2;
}

Here we are first declaring a variable $fontblock and giving it a value of 12px then after creating a class .myfonts and declaring the variable with an increment by 2, SASS is smart enough to increment in the correct measurement.

/* Numerical Operators .scss*/

$generalPadding:2%;

.thinpad {
	padding:$generalPadding /2;
}

In the second example again a variable is initially declared and a new class created with a numeric operator dividing the padding in half.
These two examples will then be compiled in the .css file as…

/* Numerical Operators .css*/

.myfonts {
  font-size: 14px; }

.thinpad {
  padding: 1%; }

That’s it – a start in SASS