Getting started with SASS 2019

What is SASS

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.-SASS website

• SASS is a CSS preprocessor, which allows us to design web pages and websites in a rapid manner.

• SCSS is a superset of CSS, where the coding style looks similar to CSS but in SASS the coding style differs.

Installation

There are multiple ways to install SASS, I’ll guide you
with three options.

1. NPM
2. RUBY
3. VS CODE PLUGIN (only applicable for VS Code users).

NPM installation

npm install node-sass

RUBY installation

gem install sass

VSCODE PLUGIN

A developer named Ritwick Dey developed a plugin called Live Sass Compiler

usage is simple, just click watch my sass button
This plugin watches for live changes and upon save it generates css file.
pretty simple though !

Compiling SASS

As you have noticed that VS code plugin usage is simple, like that node compilation is also pretty straight-forward,

sass input.scss output.css

in the above code input.scss is the input file and the output.css is the compiled CSS file.

So the setup process is over, lets get our hands dirty now by going further.

Note: Throught this article I will use SCSS style format

Simple example

In this tutorial we will use npm method
create a sample.scss

when you compile the example with following command,

sass sample.scss output.css

two files will be generated output.css and output.css.map
you will get the following content in output.css file

But the thing that feel disgusting is if you change css everytime you need to run the above command.There is an option provided to overcome difficulty. We can use --watch flag to listen for changes and it automatically compiles the sample.scss file.

sass --watch input.scss output.css

Cheerup! now we have learned the bare minimum basics of sass,lets move into core concepts ,

• variables
• nesting
• partials
• import
• mixins
• inheritance

Features

variables

In general, variables are used to store data and to use them whenever needed. Like that in SASS variables can be used to store color codes, font sizes, font stacks. To use variables $ symbol is to be prefixed. variables also introduced in new version of CSS.

Consider the below exapmle for declaring and accessing variables,

From the above example, we declared two variables $font-stack and $blue, which can be reused anywhere in the document. since changing the value of the variable will affect the applied blocks and elements.

the above SASS stylesheet will be compiled to

During compilation $font-stack and $blue are converted into their respective values sans-serifand #3bbfce.

• Data types supported by SASS are
  • numbers
  • strings
  • colors
  • booleans
  • null
  • list of values
  • maps
  • function references

Nesting

Nesting is another cool feature which saves lots of time in identifying the difference between parent and child elements or blocks.

Lets have an example,

Normally in CSS what we do is call all the parent nodes to style the child,

but with the help of SASS, we can nest child nodes inside the parent node, Which increases readability.

With the given example we can understand that SASS code is better organized and presented in hierarcial order.

And a cool thing is that we can also nest CSS properties,

The above code will copile into CSS as follows,

We all obbessed with nesting right, but there is a darkside to it. If we use so many levels it will affect our code and it will be hard to maintain, hard to read and also increases file size.

So it is advisable to keep less than 4 levels of nesting.

Partials

Partials are snippets of SASS, Partials helps us in modularizing the code. A partial is a SASS file named with a leading underscore._colors.scss And partial files can’t be ported to CSS directly. We need to import partial files into main SASS file to port them into browser understandable CSS format.
@import is used to import partial files into a manifest file.

Partials help us in reusability of code, we can import in other projects, thus saving a lot of designing time. For example, if we are okay with a button style then we can create a _button.scss file and use wherever we want.

|-- style.scss            // Sass manifest file
|
|-- _reset.sass           // Partials
|-- _variables.scss             |
|-- _functions.scss             |
|-- _mixins.scss                |
|-- _base.scss                  |
|-- _buttons.scss               |
|-- _forms.sass                 |

Import

Imports are used to import the partial files into the manifest file. To import a partial @import directive is used. In CSS import will perform HTTP re request to rceive files whereas in SCSS it imports only the requird content directly into the manifest file. Lets import the files mentioned in manifest as,

In the above import statements we didn’t added file extension .scss or .sass because SASS is smart enough to identify its partials.

Mixins

Mixins are also reusable block of codes. With the help of mixins we can able to create custom block of codes to overcome the repeating patterns. For example mentioning vendor prefixes is a real pain but with the help of mixins we can create a block of code that can be used throughout the style sheet .

to create a mixin @mixindirective is used, followed by mixin name.lets have an example

let’s break down the code, mixin directive is followed by the name and curly braces. then vendor prefixes are assigned with the mixin parameter. where $property is user defined which is assigned to the vendor prefixes in this example transform property is handled.

the CSS code will look like,

Inheritance / Extend

One of the remarkable features in SASS is inheritance. Inheritance or Extend helps us in creating shared styles, which can be inherited or extended whenever needed.

Let us have an example, to understand inheritance concept we create a shared style for buttons,

In the above snippet, .button section is a shared section, which is used by the default,success and danger buttons. .button style contains the height, font-size and border properties of a button. .button-default extends the shared style and adds extra properties which is specific to it. Like wise specific properties were added to danger and success buttons.

The CSS code for the above SASS snippet is,

There are some some pros and cons in using inheritance

• Inheritance allows reusability of code
• reduces the number of HTML class
• does not accept arguments (instead of inheritance use mixins)
• does not support media queries

Operators

Using math operators like +, -, *, /, and % in CSS is fun and useful in many cases. Using operators is as same in other languages but we cannot apply arithmetic operators on different units. for example px and em are different units

The above code will compile as,