SASS for Beginners: Basics

SASS for Beginners: Basics

SASS: CSS with super powersIn this Post of the series I’ll focus on the basics of SASS. Some of the fundamental features of sass that makes it all too awesome.


  • Variables
  • Comments
  • Maths
  • Nested Selectors
  • Imports


In case you missed the last post.
An Introduction to SASS – for beginners



Before sass came along CSS was pretty mundane and repetitive and very static. There was nothing dynamic about CSS, just some declarations lying around here and there everywhere.

SASS came along and introduced variables into CSS! (Yes, I almost died of excitement when I first heard about Variables in CSS). Lets Dive right in.

/* A Simple Variable */
$color: #ffffff;

Thats it, there you have it. A variable. This variable is named `color` and if contains the hex code value for white.

So lets explicitly define the anatomy of a variable declaration.

  1. Variables start with the dollar sign($). (like in PHP, yay)
  2. Variable names can be anything including hyphens(-) and underscores(_) can’t contain any other special characters.
  3. You assign values to variables using the colon(:). (CSS Style)
  4. You can store data types like: Strings, Numbers, Colors, Arrays(lists & maps).
  5. Every line, including variable declarations has to end with a semi-colon.


Using Variables

To use a variable you just write the variable’s name (including the dollar sign) in place where you intend the variable’s value (like in maths and every other programming language on earth ever created and will be created).


$box-pad: 2em;
$gray-tone: #333;
$heading-weight: 800;
    padding: $box-pad;
    color: $gray-tone;
    font-weight: $heading-weight;


Types of Data

You can store a variety of data in your variables and use them when ever you want to. I listed most of them here.


Numbers can be any numeric value, that ay or may not have a unit such as em or px or in or or pt

/* Without a Unit */
$number: 700;

/* With Units */
$number: 2em;
$number: 30px;
$number: 6pt;
$number: 2in;



Colors are another very common CSS property value, so it would be a pity if you couldn’t store them in variables. Thankfully, you totally can!

/* Hex Value */
$color: #ff0000;

/* rgb */
$color: rgb(255,0,0);


Strings (text)

A lot of times you actually need text in CSS. The obvious is the content: "" property. But, I am not sure if you’ve realized that Font Names are strings too.

In SASS, strings may or may not be quoted, but strings with spaces most definitely has to be quoted. Lets see examples.

$greeting: Hello;
$say: "Hello World!";
$default-font: Helvetica;
$alternative-font: "Stencil Melted";


Boolean (yes or no?)

As SASS supports control structures and logic (as we will see later in this series), it is natural that it supports Boolean values to implement these logic.

You could skip over this data-type if you want to wait till the control structures chapter to learn this, but hey its simple so why not keep it in mind before hand?

A Boolean has only two possible values. true and false.

/* Tooth Fairy Dosen't Exist, sorry kids */
$tooth-fairy: false;

/* But, Santa is totally real */
$santa-clause: true;


null (nothing, really)

null is like zero. IT stands for nothing, but when you’re programming even zero means something so to truly define ‘nothing’ programmers invented the value null. There is only one keyword: null and that’s it. All there is to it. (This is a lot more helpful when writing logic, I swear)

$useless: null;


Lists & Maps (Arrays)

If you have experience in any other language before HTML & CSS then you most probably know what Arrays are, but if you’re new to Programing, and just know HTML and CSS, Arrays just might be a completely foreign term to you. So, in light of that, I think its better to put all these arays and maps and lists and stuff into a post of its own in this series.


Practicing what you Learn

In order to practice and test everything you learn in this series, lets get introduced with a more SASS commands.

Direct Command-line Output

Lets assume you have a file named “my_sass.scss” where you are writing your SASS code. (.scss is the common file extension for sass files remember?)

> sass my_sass.scss

Also assuming, that you have sass code inside your file you should get the output straight away in your command window like such:

> sass my_sass.scss
p {
  padding: 1em; }

Wait that doesn’t look right!

Remember! SASS’ default output style is nested to get the familiar output style you need to specify it as such:

> sass my_sass.scss --style expanded

Which should give you an output like:

> sass my_sass.scss
p {
  padding: 1em;



You can tell SASS to continually monitor your file for changes, and when the changes do occur, SASS will auto compile it to a CSS file. We can say that SASS will “watch” your file.

> sass --watch my_sass.scss

This will create a CSS file named “my_sass.css” and everytime you make a change to my_sass.scss SASS will recompile a new my_sass.css fro you so you don’t have to run any commands.

Optionally you could explicitly set the output css file name.

> sass --watch my_sass.scss:styles.css

this will create a file named “styles.css” right beside your “my_sass.scss” file.

How to Stop Watching?

Press and hold the Control or Command button and press ‘C’;



CSS Comments are Ugly.
– Omran Jamal

There, I said it. I wasn’t the first one though. CSS comments are really quite a hassle due to the explicit need for both the closing and opening tags.

/* Hi, I'm a Ugly CSS Comment */
    color: pink;

So the Ruby gurus who built SASS thought, ‘Hey, you know what? Imma change all that’ and thus the Javascript Style (or rather C style) comments were added.

// I'm a sexy C style Comment
    color: pink;

Ahh, so much better. Note, comments in sass do not show up in the compiled CSS files, as its not normal to inspect the Generated CSS files. Comments happening in SASS, stays in SASS (Just like things that happen in Vegas).

But wait! You do still need to wrap multi-line comments in the old systax.

  I'm a looooo-



YOU CAN DO MATHS IN SASS. Are you excited? Well, I’m Excited.

In SASS you have the facility to use the common mathematical Operators such as the * for multiplication, / for division, + & – for addition and subtraction.

Lets See some in Action.

    font-size: 2em * 2; //4em

results in

    font-size: 4em;

Yes, when multiplying a value with a unit to a unitless number usually preserves Units.

You can assign results to variables

$result: 8em/2; //4em

You can do math with variables

$value: 2em;
$times: 6;
$result: $value * $times; //12em

Lets see an advanced example using variables, divisions, additions and subtractions.

$pad: 12px;
$line: 2em;
    padding: $pad/2;
    line-height: $line;
    font-size: $line - 0.5;
    margin-top: $pad + 8;

Turns into:

div.main {
    padding: 6px;
    line-height: 2em;
    font-size: 1.5em;
    margin-top: 20px;

By now it should be clear to you exactly what you can do in SASS with math operators. Lets Expand upon this and introduce maths Functions.

Math Functions

There are a lot of math functions at your disposal.

  • abs (x) – Returns the absolute value of a number (turns negative numbers positive and keeps positive numbers positive)
  • min (a,b,c,d,e …….. ) – takes a large list of numbers separated by commas and returns the smallest one.
  • max (a,b,c,d,e …….. ) – takes a large list of numbers separated by commas and returns the largest one.
  • floor (x) – Returns the last integer of a factional number
  • ceil (x) – Returns the next whole number to a fractional number.
  • round (x) – Returns the closest whole number.


$a: abs(-10);              //10
$b: min(7, 8, 2, 9, 12);   //2
$c: max(7, 8, 2, 9, 12);   //12
$d: floor(2.6em);          //2em
$e: ceil(3.2em);           //4em
$f: round(5.8em);          //6em

Other interesting Functions

  • random(limit) – takes a number as a limit and returns a randomly selected number between 1 and the limit.
  • percentage(x) – takes a number and converts it to a percentage value.
$e: random(10); //Could be anything between 1 and 10
$p1: percentage(0.2); // 20%
$p2: percentage(4); //400%


What about Advanced Math Functions?

You mean like log(), sin(), tan(), cos(), Pi()? Well, SURPRISE! There isn’t any (yet). We do hope to see these functions in the future but till then you have to implement everything on your own, or use a ready-made library like Compass (If you don’t know what Compass is or how to use it, just wait till I write an Article on Compass, or look it up on your own).

If you do want to implement all this by yourself (maybe because numbers get you high?) but don’t know how to, read this excellent post by Microsoft Engineer, Daniel on his blog Unindented.

Trigonometry in SASS


Nested Selectors

A lot of times, when you’re writing a large chunk of related CSS code, you end up repeating a the selectors so that you can target the elements inside your container elements, or when using pseudo selectors on child elements of containers. Well yeah, that how CSS works right? I bet you also admit that it gets messy and confusing sometimes.

Well, what if you could nest the selectors? What if you could make the same structure of your HTML inside your CSS? WHAT IF?

Yeah, you saw it coming: SASS lets you do just that!

    padding: 1em;
        color: orange;

Compiles to

p {
  padding: 1em;
p a {
  color: orange;

SEE! wow right? When you nest selectors inside another, every nested selector becomes a descendant selector. Like in our example, we nested the anchor selector inside a paragraph selector, so the compiled CSS targets all anchors inside paragraph elements. MAGIC!

you could go many levels deep! (as many as you want)

                color: orange;


body div.content p a {
  color: orange;


Referencing Parent Selectors

Its hard to explain what this is and why you need this, so I think an example will fit perfectly in place of explanations.

div.container {
    p {
        padding: 1em;
            &.extra-padded {
            padding: 2em;

If we were to compile this, we’d get

div.container p {
  padding: 1em;
div.container p.extra-padded {
  padding: 2em;

You see, if you use the ampersand in place of a selector it copies the whole parent selector. And if you add something before of after the  ampersand they get appended to the parent selector.

This is really helpful if you want to style something special and its just slightly different. Parent Selector References help you to keep that code in one place and helps keep code a lot cleaner.

This is a really powerful feature trust me. You’ll thank me when I teach you how much crazy stuff you can generate with mixins (to be covered in a later chapter) and parent selectors together.

Lets see another common, helpful example

    text-decoration: none;
        text-decoration: underline;

This compiles to

a {
  text-decoration: none;
a:hover {
  text-decoration: underline;

As you can see, this works with Pseudo Selectors as well. Don’t you think its amazing that you can write the hover styles and the base styles nested under the same curly braces? I think, it makes my code a lot cleaner.


SASS Imports

We’ve all been in a situation where you start out small with a single css file and that CSS file starts growing exponentially up to a point it becomes unmanageable. You scramble with your text editor with two or three view into the same file. But Wait keeps growing and you don’t have enough room on your screen for more views into the file, you finally decide to use a third party build tool that combines your broken down CSS files.

Q: What happened to CSS imports or umm, linking more CSS files in your HTML?

Ans: Well, do you really wanna do that? I mean CSS imports and HTML links triger more and more HTTP requests, causing a lot of overhead and critically slowing down the performance of your webpage!

Alright! So whats your Solution?

Two Words; SASS. Imports.

SASS imports work just like CSS imports but SASS first combines the CSS files for you in the right places at the right time and outputs a single CSS file. So, the day is saved by SASS. Again.

SASS imports look like CSS imports too. For the example lets assume you got another file named “my_other_sass.scss” with more styling.

@import 'my_other_sass.scss';

This will quite simply, just bring the whole of the file “my_other_sass.scss” in your file and output a single CSS file.

Sass imports also work in directory structures, so go ahead and modularize your CSS (SASS) and structure them into Directories.



Wheiu! OK That was a lot of input to take. I hope it wasn’t too complicated to follow along, besides its just SASS a friendly CSS like CSS extension language!

In this post you have learned a lot. This could be enough to get you on your feet into writing your Styles in SASS on a daily basis (I always do really, and now I wonder what I did before I had the help of SASS).

If you are eager to learn more about SASS you have two options.

  1. If you absolutely cannot wait, go through the SASS reference and learn to your heart’s desire.
  2. If you’ve fallen in love with my writing, go ahead and wait for the Next Post in this series.

Till, Next Time.

4 comments to “SASS for Beginners: Basics”

Leave a Reply

Your email address will not be published. Required fields are marked *