SASS: Save time writing CSS

Sass stands for Syntactically awesome stylesheets. It is a CSS Preprocessor. The preprocessor is simply software that allows us to transform the input so as to produce the same output. In simple terms Sass allows us to write CSS in a much simpler syntax(transforms the input) and still produces the same CSS effects(You will see it in a bit). It works like —

SASS Source Code — — — —SASS compiler— — — — — →CSS Code

We write SASS code and with the help of a Sass compiler our sass code gets converted into valid CSS code.

All Sass files end with a .sass or .scss extension. Both these extensions have a slight difference in their syntax. We will be using and understanding .scss syntax as it is much simpler and popular. To start using sass, just create a main.scss file in your working folder

The most important features of Sass —

  • Variables
  • Nesting
  • Operators
  • Partials and imports
  • Mixins
  • Extends
  1. Variables — Variables are simply containers that help us to store data in them (as in any other programming language).Syntax to declare an SCSS variable- $variable-name: value;
SASS VARIABLES

The main advantage of using a variable is simply if in the future we want to change the primary color from #f9ed69 to suppose any other color or the font from Work Sans to any other font, We can simply change the value in the variable and the change will be reflected everywhere.

2. Nesting — Nesting is simply embedding a CSS selector into another selector. It allows us to work in a hierarchy. You can nest selectors up to any depth but as a good practice don't go above 3 levels.

SASS NESTING

Here & refers to the current selection. As we are in the li selector and we have used &:last-child it will compile to li:last-child.

3. Operators — Operators allow us to perform some kind of operations(as in any other programming language). All Mathematical operations like addition(+), subtraction(-), multiplication (*) , division(/) etc are valid in SASS.

SASS OPERATORS

4. Mixins — Mixins are simply reusable pieces of code/snippets. Syntax to create a mixin- @mixin name-of-mixin { code }. Now to add this mixin anywhere in the code you can use @include name-of-mixin. A very common example is to create clearfix as a mixin so as to clear your floats. We can also pass arguments to a mixin.

SASS MIXINS

NOTE- Use mixins only when you want to pass arguments (will be clear after reading about extends).

5. Partials and Imports- SASS allows us to segregate our code into different files with the help of partials. It makes our code more manageable by splitting different styles into different files(partial files.). Then these partial files can be imported (import)in one main file. Partial files are created by adding a (_ )prefix to the scss file.

_navbar.scss
_header.scss

I have created 2 partial files namely _navbar.scss and _header.scss.

  • _navbar.scss- It contains all the styles related to the navbar.
  • _header.scss- It contains all the styles related to the header of the page

Both of these files can be imported in the main.scss file as -

@import ‘navbar’; (no need to specify _)

@import ‘header’; (no need to specify _)

NOTE- The final compiled code will have just one file with all these styles.

6. Extends — Extends allow us to create placeholder code (code that is similar) which then can be added to multiple elements.

SASS EXTENDS

Extends allow us to make our code DRY (don't repeat yourself), unlike mixins. mixins copy the same code in all the different selectors they are used in, on the other hand, extends just create a common rule for all those selectors they are used in, To improve your extends you can also use-

BETTER WAY

Using % will prevent creating an extra unnecessary class basic-button in the final compiled code.

In the upcoming articles, we will be understanding how we can use Sass with BEM and CSS Architectures to write more readable, scalable and manageable CSS.

Web Developer