Uncategorized

Why SASS ?

Introduction :

In earlier days we use CSS (Cascading Style Sheets) to provide styles to the web pages. But if the project grows, it becomes more complex to maintain your stylesheets. You can add comments in the CSS file and use them to search patterns. But it is not a good and reliable solution. You can split your CSS into parts based on your requirement but it requires a separate HTTP call for each CSS file request. This is also not reliable and encouraging. But SASS  provides a mechanism to overcome this. Sass uses @import rule. By using this, we can modularize our code into various small files and import them. In Sass, all the imported files are merged together in a single CSS file. So a single HTTP request is enough for rendering this unique CSS file to the browser.

Simple example to say SASS is powerful :

Consider a site using three colors mainly (say #a2b9bc, #b2ad7f, #878f99). You may have to type these hexa-decimal values each time you use, throughout the project. Instead of this SASS provides variables, where we can store these colors and use them throughout the project. Besides this, we can have the variations for the colors using SASS color manipulation functions.

Sass is very powerful because of its features. These features provide the re-usability, reduce time and space complexity and improve SEO performance.

Features :

Easy to learn and Use :

Sass is open source. It is almost the same as CSS. Even if you write pure CSS into SASS code then the compiler will generate the same css code.

Variables :

One of the most useful features of SASS are variables. These variables allow the user to pre-define some values and these values can be used across the project in different files. Variables in Sass are the same as variables in javascript. Variables in Sass always starts with $.

With Sass, you can store the variables like strings, numbers, booleans, colors, lists and nulls

Syntax:

$variable-name: variable-value;

Example:

When the Sass file is transpiled, it will take all the variables and outputs the normal CSS with variable values.

If we want to change the value of any variable, then changing in one place will automatically update the other files in the entire project. This saves time and reduces the complexity for the developer.

Variable Scoping :

Sass variables are available only at the level of nesting where they are defined.

Consider the following code,

In the above, the text inside the <p> tag will be red. But inside the <h1> tag the variable value is modified which will be effective within the scope only. This is the default behaviour of the variable scope in SASS.

Global Scope :

The default behaviour of the variable can be overridden by !global. This global switch indicates that this variable is global i.e., this can be accessible at all levels. In the above sample example, the text color inside the <h1> and <p> both will be blue in this case.

Nesting :

Nesting is another most useful feature of Sass. CSS doesn’t support selector nesting. In CSS, we specify the child selector followed by parent selector with space between them whereas child selectors are nested into the parent selector in Scss using nesting.

Traditional way of writing code without sass:

Notice that we’ve to repeat the navigation category name each time we wish to style its youngsters. We can write cleaner and less repetitive code with sass.

For example:

Mixins :

Sass provides mixins which make it very powerful when compared to CSS. By using mixins, we can reduce code redundancy and increase code recycle. A mixin is a reusable piece of code that is similar to functions. This directive lets us create css code that can be reused throughout the project. These mixins can be used by including them in the file with @include directive.

For instance, we will outline a mixin as following:

@mixin mixin_name() {

Property: value;

}

For example:

Here, we can use the above mixin in our code just by using @include directive, for example:

Passing variables to a mixin :

We can also pass arguments to the mixins. But the arguments are set as variables and then used as values.

Example:

We can include the mixin as:

Functions :

Functions in Sass are unit like functions in JavaScript. Like JavaScript, functions in Sass will accept the arguments and return a value.

For example:

Sass provides various functions namely

  • String functions
  • Numeric functions
  • List functions
  • Map functions
  • Selector functions
  • Color functions

String functions :

In Sass, string indexing starts with 1 not with 0. Some of the string functions are quote(string), str-index(string, substring), str-length(string) etc

Number Functions:

These functions used to manipulate the numerical values. Some of the number functions are round(), random(), percentage() etc.

List functions:

Lists in Sass are immutable (can’t be changed). List functions will not manipulate the list but returns the new list without manipulating the original list. List functions can access the values in the list, add items and combine the list. Lists indexing starts with 1. Some of the list functions are append(list, value, [seperator]), index(list,value) etc.

Map functions :

Map generally represents the key-value pairs. Maps are immutable i.e, the returned map will be a new map but don’t change the existing map. Some of the map functions are map-get(map, key), map(mapName) etc.

Selector functions:

Selector functions are used to check the selectors and also manipulate them. Some of the selector functions are selector-nest(selectors), selector-append(selectors), etc

Color functions :

In sass, color functions are divided into three categories

  • Set color functions
  • Get color functions
  • Manipulate color functions

Set color functions :

Used to set colors using some models namely RGB, RGBA etc. Some of them are rgb(), rgba(), hsl() etc.

Get color functions :

Used the get the color of code or hue, saturation etc. Some of the functions are red(), hue(), saturation() etc.

Sass manipulate functions :

Used to manipulate the color i.e, increase or decrease the lightness or darkness of color. Some of the functions are lighten(), darken(), saturate() etc.

Partials and Import:

import:

Sass keeps the Css code DRY i.e., Don’t Repeat Yourself. One of the features that lets us keep the code DRY is to maintain the related code in separate files. We use @import directive to import partial into another Sass file.

Syntax : @import filename;

Unlike CSS imports, Sass imports don’t send another HTTP request for retrieving the partial, because all the imports are placed in a single CSS file while compiling.

Example: @import “variables”.

partials:

Sass by default transpiles all the scss files directly. However when you want to import a file, you don’t need the file to be transpiled directly. In Sass, there is a mechanism: If the file name starts with an ‘_ (underscore)’ then sass will not transpile it. This type of files are called Partials.

Partials in Sass are unit separate files containing Sass code that build our code standard. By using partials, we will be able to have separate Sass files for various components.  As an example, we are able to import the _header.scss file into main.scss file.

We can omit the underscore(_) and .scss file extension while importing a partial in a file.

Example:

_variable.scss

_color.scss

@import “variables”

@import “colors”

Inheritance/Extend:

In Sass, we have the freedom to extend CSS properties from one selector to another. For this, SCSS provides a special directive named @extend. In general when all the properties of different elements are identical but differ in small details, we can use this @extend directive

Example :

.button-report will have all properties of .button-basic here.

Generally, for inheritance we use placeholder classes that start with ‘%’.  The advantage of using placeholder classes is that it only prints in compiled CSS once it’s extended, and facilitates your compiled CSS keep neat and clean.

Ampersand (&) operator:

The (&) Ampersand operator is another helpful feature of Sass. This operator is especially useful after you are exploring BEM methodology.

Let’s take a glance at below HTML:

<button class=”btn btn–green”>Hello World</button>

Without & operator, We used to write like this:

By using & operator we can write it like this:

By using the ‘&’ operator, we can nest selectors that share a similar name, and during compile time, the ‘&’ operator will be replaced by its enclosing selector name.

Directives:

There are several directives in Sass. For instance, @extend, @mixin, and @import  are the directives that we’ve seen above. There are other directives in Sass, like @if, @else, @for, @while.

@if and @else directives

The @if and @else directives are just like if and else statements in JavaScript.

For example:

Here, we are using a  mixin ‘text-color’ that accepts an argument $val. We can have variable colors depending upon the argument passed to the mixin ‘text-color’.

@for and @while directive

The @for and @while directives are just like ‘for’ and ‘while’ loops in JavaScript. For example:

We use ‘#{}’ to use variables within a selector name and other CSS functions. This will be compiled into following CSS code.

We can additionally implement the above code using @while directive.

For example:

The compiled code will be same as @for loop.

Advantages:

  • Sass allows us to write neat and clean code
  • Since it is an extension of CSS, it is more stable, powerful and elegant
  • Sass is compatible with all CSS versions
  • It reduces the number of lines of code
  • It removes the code redundancy by using mixins, variables, nesting etc
  • It improves code readability
  • It is an open source preprocessor
  • Color schemes can be re-used
  • HTML5 SASS-based network is more responsive
  • We can combine multiple functions using SASS

Disadvantages:

  • Code should be compiled in order to apply styles to the webpage
  • Compilation slows down the development
  • It may cause loosing the benefit of browser’s built-in element inspector
  • Troubleshooting is difficult while using SASS
  • Debugging is harder. It has a compilation step which means the line numbers will become irrelevant when trying to debug
  • They will produce very large CSS files

We have learned what Sass is, a way to install it regionally and mentioned its unique features that make sass so powerful. Sass adds basic programming capabilities to CSS. Using Sass, we will perform basic calculations, reprocess code using mixins, and make functions. Sass makes maintenance of CSS easier.

About The Author