What is SASS & How we use it

What is SASS

SASS (Syntactically Awesome StyleSheets) is an extension of CSS. SASS allows you to usefeatures like nested rules, variables, mixins, selector inheritance, and more.

It also helps to keep everything very organized and allows you to create stylesheets faster. Now we see how to install SASS.

Install SASS

Before we can compose SASS we need to install it. SASS is built upon Ruby. If you are working on a Mac, you have already installed Ruby. If you may install Ruby in Windows, use this Ruby Installer.

After the installation of SASS is completed, you can go to Terminal (on a Mac) or in Command Prompt (on Windows) then type the following command line in it:

Mac

sudo gem install sass

Windows

gem install sass

SASS Basic

CSS on its own can be fun, but stylesheets are getting larger, more difficult, and harder to maintain. This is where a preprocessor can help. SASS lets you use features that do not exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Variables

In CSS write color or font-stack every time when you put new CSS. Each and every time you have to search for your color (hexadecimal code) or font-stack that’s very time consuming.

SASS provides variables as a way to store information that you want to use every time throughout your stylesheet. You can store color value and also easy to remember long font stack. The way you declare a variable is with a dollar sign $ followed by the name.

$primary-font: Helvetica, sans-serif;
$primary-color: #000;

body { font: $primary-font; color: $primary-color; }

When the SASS is processed, it takes the variables we define for the $primary-font and $primary-color and outputs in normal CSS with our variable values placed in the CSS. This can be most powerful when working with brand colors and keeping them consistent throughout the site.

body { font: Helvetica, sans-serif; color: #000; }

Nesting

With nesting you make your CSS easier to read, extend, and maintain. For some situations its work  but for designing CSS is very lengthy, nesting your CSS is almost always a terrible idea.

nav {

     ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

     li {display: inline-block;}

     a {
         display: block;
        padding: 5px 10px;
        text-decoration: none;
     }
}

Now you can see that the ul, li, and a selectors are nested inside the nav selector. This is a great way to manage your CSS and make it more readable. When you generate the CSS you’ll get something like this:

nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
}

nav li {
     display: inline-block;
}

nav a {
     display: block;
     padding: 5px 10px;
     text-decoration: none;
}

Mixing

SASS mixins are blocks of code that you define once and can then re-use anywhere, if you are aware with any programming language you can think of them as functions. A mixin can take one or more parameters and make calls to functions to in the end output CSS, and they are very useful when you want really clean and DRY code.

@mixin linx ($link, $visit, $hover, $active) {
      a {
        color: $link;
        &:visited {
          color: $visit;
        }
        &:hover {
          color: $hover;   
        }
        &:active {
          color: $active;
        }
    }
}
@include linx(white, blue, green, red);

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin linx. We’re also using the variables $link, $visit, $hover, $active inside the parentheses so we can pass in a linx of whatever we want. After you create your mixin, you can use it CSS declaration before write @include followed by the name of the mixin. When your CSS is generated it’ll look like this:

a:link {color: white;}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: red;}

Import

Now you might think that CSS has also use of @import, it is not that cool” and you would be right but the CSS and SASS versions are different in a significant way. In normal CSS @import add or import other style sheets but it does this by making another HTTP request, something we usually want to avoid. For this particular reason you may not have even used @import before. On the other hand SASS is a preprocessor (emphasis on the pre) that will pull in that file before it compiles CSS.

The result is one CSS page is handled by one HTTP request. Its means that you can break your css into smaller one and more maintainable bit while still only serving one page to the browser.

Let’s say you have a couple of SASS files, _reset.scss and base.scss. Now you import _reset.scss into base.scss.

//_reset.scss
html, body, ul, ol {
    margin: 0;
    padding: 0;
}

//_base.scss
@import ‘reset’;

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

Notice we’re using @import ‘reset’; in the base.scss file. When you import a file you do not need to add the file extension .scss. SASS is smart and will figure it out for you. When you generate the CSS you’ll get:

html, body, ul, ol {
    margin: 0;
    padding: 0;
}
body {
    font: 100% Arial, sans-serif;
    background-color: #f9f9f9;
}

Extend

These tools been great but I’ve saved the best for last. Extend is one of the most useful features that allows us to share a set of CSS properties from one selector to another. The pair of buttons, like an accept button and decline button on a modal window. Since they are both buttons they will probably share most of the same styling but the decline button with red background to make it differ. With use of SASS we write the default styles for all buttons then “extend” these styles to the decline button where we would add the red background.

.button {
    background: rgba($color, .8);
    color: lighten($color, 65%);
    border: 1px solid darken($color, 5%);
    padding: 1em;
    display: block;
    max-width: 200px;
}
.button-decline {
    @extend .button;
    background: red;
}

What the above code does is allows you to take the CSS properties in .button and apply them to .button-decline. The magic happens with the generated CSS and this helps you to consume your time to write multiple class names on HTML elements. This is what it looks like:

.button, .button-decline {
    background: rgba(51, 51, 51, 0.8);
    color: #d9d9d9;
    border: 1px solid #262626;
    padding: 1em;
    display: block;
    max-width: 200px;
}
.button-decline {
    background: red;
}

Give SASS a chance for your next website its very usefulness and time consuming for your project.