Learn SASS – better late than never

sass glasses

There has been a lot of talk about CSS Pre-processors, Post-processors, Object Oriented CSS. Biggies of front-end development like Chris Coyier, David Walsh etc have written articles that introduce people to the concept of SASS pre-processors. Online Video Training websites like Lynda.com, CodeCourse, Laracasts have made videos training on the subject. But still, there are a lot of people like me who are too late to start working with pre-processors either due to laziness to learn something new (like me) or were overwhelmed (like me, again) by all the bells and whistles around it. Let’s understand what SASS is in an easy to follow series of blog posts.

Series Index
Learn SASS – better late than never
– Let’s learn by building
– Writing SASS
– Browser Support & References

CSS is lovely, SASS makes it lovelier

CSS is the presentation language that helps separate the content from design. It describes how the HTML/XML elements will be rendered on the screen, how the pages will change layout depending on the viewport sizes etc. CSS has enabled controlling the layout of all the pages of the website from a single stylesheet. It also lets one have a precise control over those layouts. But as the websites grow in size and as they become more complex, it becomes more and more difficult to manage and maintain the CSS file.

This brings us to SASS, an extension of CSS that lets us use features that are yet not available in CSS by default. Once you start tinkering with SASS components like variables, extend/inheritance, nesting, mixins, partials etc. writing, managing and maintaining CSS becomes a breeze.

Before we deep dive into SASS, let’s first understand SASS components in detail.

Components of SASS

Variables

Variables are blocks that can store information that you would want to reuse again and again. The variables in SASS works exactly the way variables work in other programming languages.

SASS variables are declared by a┬á$” sign at the start. The variable name cannot start with a number, however, it can be alpha-numeric. It is ideal to separate words in variable names by a “-“ (hyphen). eg : $my-header.

Let’s see some examples

$primary-color : #cecece
$secondary-color : #3a3a3a

$default-font-size : 1.1 rem
$default-line-height : 1.3
$normal-font-weight : normal
$font-stack : Helvetica, "Trebuchet MS", sans-serif

Here is how you can use the variables in your SASS file.

.header
    background-color: $primary-color
    color: $secondary-color
    font: $normal-font-weight $default-font-size/$default-line-height $font-stack

When we write SASS file, we do not use curly braces “{}” & semi-colons “;”. SASS relies on indentation & line-breaks to figure that out. This at times confuses a lot of people. Fortunately, to tackle this we can write it in SCSS format which is same only with the addition of curly braces “{}” & semi-colons “;” as shown below.

.header {
    background-color: $primary-color;
    color: $secondary-color;
    font: $normal-font-weight $default-font-size/$default-line-height $font-stack; 
}

The above SASS/SCSS style rules will render following CSS when compiled.

.header {
    background-color: #cecece;
    color: #3a3a3a;
    font: normal 1.1rem/1.3 Helvetica, "Trebuchet MS", sans-serif;
}

Let’s see how we use multiple variables when declaring shorthand style rule.

.header
    font: $normal-font-weight $default-font-size/$default-line-height $font-stack

    /* You can use more than one variable when declaring a CSS rule. The font shorthand takes following values font weight, font size, line height & font stack. All of those are defined by variables in the below line. */

Now that you have understood the variables, let’s move on to explore another component of SASS, “Nesting”.

Nesting

Nesting refers to declaring style rules in a more readable manner. Let’s see how we can declare styling rules of navigation menu inside the header using SASS nesting.

.header
    background-color: $primary-color
        
        nav
            
            ul
                list-style-type: none
                list-style-position: outside                
                
                li
                    color: $secondary-color
                    font: $normal-font-weight $default-font-size/$default-line-height $font-stack

Let’s see the same written in SCSS format.

.header {
    background-color: $primary-color;

    nav {

        ul {
            list-style-type: none
            list-style-position: outside

            li {
                color: $secondary-color;
                font: $normal-font-weight $default-font-size/$default-line-height $font-stack;
            }

        }

    }

}

Note: If you notice the SASS format takes up a lot lesser place and coding effort, while SCSS is more readable. You can use the one of your preference. There is no other difference between the two except for the ones mentioned earlier.

Operators

SASS gives us the ability to do operations & check for validations with our style rules. We can do arithmetic, comparison, equality,
logical, string & color operations with SASS. We will see the Arithmetic Operators. To see other operators refer to this link (http://sasslang.com/documentation/file.SASS_REFERENCE.html#Operations).

Arithmetic Operators

SASS lets us do math operations using following operators.

  • “+” addition
  • “-” subtraction
  • “*” multiplication
  • “/” division
  • “%” modulo
.article
    width : 800/1024*100

.aside
    width : 224/1024*100

You cannot use operators on different units.

p
    /* This cannot be done */
    font-size : 20px * 1rem

    /* This can be done */
    font-size : 20px * 16px

Multiplying numbers by the same unit will render invalid CSS.

p
    /* This will render invalid css */
    font-size : 2px * 10px

    /* This will render valid css */
    font-size : 2px * 10

As we use “/” forward slash to separate font size with line height in font rule, it is important to wrap the division rule in parenthesis.

p
    /* This will render invalid css */
    font-size : 2px / 10px

    /* This will render valid css */
    font-size : (2px / 10px)

Mixins

Mixins allow you to declare style rules that can be used throughout the stylesheet. You can also pass arguments to mixins.

@mixin transition($axis $time $effect)
    transition: $axis $time $effect
    -webkit-transition: $axis $time $effect

a:hover
    @include transition(all 1s ease-in)

This will compile to the following CSS

a:hover {
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
}

Extend/Inheritance

The purpose of developing SASS was to introduce front-end developers to a unique way of writing which was called DRY (Do not Repeat Yourself). Extend/Inheritance was the tool to do that. Extend also enabled front-end developer to declared rules that were shared between selectors.

Let’s deep dive to see how “extend” works.

.alert
    color: $secondary-color
    padding: 5px 10px
    width: 100%

.success
    extend .alert
    background: #ff0000

.warning
    extent .alert
    background: #ffff00

Here is how the compiled CSS will look.

.alert, .success, .warning {
    color: #3a3a3a;
    padding: 5px 10px;
    width: 100%;
}

.success {
    background: #ff0000;
}

.warning {
    background: #ffff00;
}

 

Partials

SASS intends to make CSS modular and flexible. Partials are the perfect tool to enable modularity in SASS. Partials enable you to divide the style declarations into various files. These files can be consolidated using @import┬ádirective. The partial files should have their filenames starting with “_” underscore. e.g. : _header.scss. This will tell SASS to not compile the CSS from this file.

All this sounds interesting but let’s see how partials work by understanding Import works.

Import

@import directive is used to import all the SASS partials in one file that can be then compiled into browser readable CSS. When you use the @import┬ádirective you don’t need to use the “_” & “SCSS” file extension.

Let’s see an example where we would import the style rules of navigation into our header SASS file.

header.scss

header
    background: $primary-color
    font-family: $font-stack

    @import navigation /* Import navigation code */

_navigation.scss

nav ul
    list-style-type : none
    list-style-position : outside

nav ul li
    display : inline-block
    margin-right : 10px

The above code will compile following CSS

header {
    background: #cecece;
    font-family: Helvetica, "Trebuchet MS", sans-serif;
}

nav ul {
    list-style-type : none;
    list-style-position : outside;
}

nav ul li {
     display : inline-block;
     margin-right : 10px;
}

Compiling SASS to CSS

As the browsers cannot read SASS files, these SASS files need to be compiled into CSS files. SASS gives us an inbuilt command that we can use in Terminal to compile SASS files.

    sass [input_file_name.sass] [output_file_name.css]

The command is called SASS and it takes 2 parameters ‘input file’ which is the SASS/SCSS file and ‘output file’ which is the CSS file.

This wraps the components of SASS. In the next article, we will see what we will build to learn SASS, we will understand and discuss dependencies & see how to implement them. After that, we will setup SASS.

If this has been helpful please share this article with your friends and colleagues.

Series Index
Learn SASS – better late than never
– Let’s learn by building
– Writing SASS
– Browser Support & References