Coders Read

Understanding on SCSS and SASS

What is SCSS and SASS?

SCSS (or Sass) offers a way to write styles for websites with more enhanced CSS syntax. In general, browsers do not know how to process SCSS features, such as functions, mixins, and nesting. We’ll need to convert them to regular CSS files to run them in the browser.

SASS stands for Syntactically Awesome Stylesheets. It is a simpler and powerful way of writing our CSS. Writing CSS in SASS actually saves our time. It is actually a Pre-processor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

A pre-processor is a type of program that converts a unique syntax into CSS. The job of the pre-processor is to reduce the repetition of the same CSS text over and over again and to create CSS easily in less time. Pre-processors have some features that are not included in ordinary CSS. 

Difference between SCSS and SASS

Let’s list down the main difference between SASS and SCSS.

  • SASS follows strict indentation where as SCSS has no strict indentation.
  • SASS file extension is .sass and SCSS file extension is .scss.
  • SASS is used when we need an original syntax where as code syntax is not required for SCSS.
  • SASS has a loose syntax with white space and no semicolons where as SCSS resembles more to CSS style and use of semicolons and braces are mandatory.

Why SASS / SCSS ?

  • Writing styles to our HTML using only the CSS looks really unorganized and takes more time. This is one of the main reasons for the aspiring web-developers to adopt SASS.
  • SASS is a short hand for CSS.
  • SASS is an Industry approved CSS Extension. That means the Software Industry is using SASS to style their pages and therefore, learning SASS is definitely a benefit for us.

Lets see some code syntax for CSS, SCSS and SASS

  • CSS
body {  
    color: black;  
    background: white;
}
  • SASS
$primary-color: black
$primary-bg: white

body  
    color: $primary-color  
    background: $primary-bg
  • SCSS
$primary-color: green
$primary-bg: red

body {  
    color: $primary-color  
    background: $primary-bg
}

Features of SCSS or SASS

Variables

It stores data. In SCSS, we can save any css value in variables. Variables are defined using $ symbol. Below are some sample variable declarations.

$container-width: 840px;
$my-font-color: #e8e8e8;

Variable usage:

/* Using SCSS */

body {
    color: $my-font-color;
    content {
        width: $container-width;
    }
}
/* Using SASS */

body
    color: $my-font-color
    contentwidth: $container-width

When SASS is converted to CSS, all the variables are replaced with their original values. SCSS variables are useful to keep fonts, colors, and other values consistent thought a website or web app.

SCSS variables are replaced with values when converted into CSS variables. These conversions happens before they are served to the browser, thus the browsers is not aware about the variables.

Nesting

Suppose that we are styling a navbar, the traditional way to style navbar may look like the below code.

nav {
    background: #ffcccc;
    padding:10px;
}
nav ul {
    margin:0;
    padding:100px;
}
nav ul li {
    display:inline-block;
}

But using SCSS the same can be achieved in more organized way, i.e

nav {
    background:#ffcccc;
    padding:10px;
    ul {
        margin:0;
        padding:100px;
        li {
            display:inline-block;
       }
    }
}

Mixins

A mixin is a group of CSS declarations that can be reused. The syntax is similar to functions in Javascript except that instead of the keyword function keyword, use the @mixin directive. We can have arguments too. Calling the mixin is done via the @include statement.

Suppose that we are styling a navbar, the traditional way to style navbar may look like the below code.

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

nav ul li { 
    display: inline-block; 
    margin-left: 2px; 
    margin-right: 2em;
}

Using mixins we can achieve the same, i.e

/* Using SCSS */

@mixin reset-list {  
    margin: 0;  
    padding: 0;  
    list-style: none;
}

@mixin horizontal-list {  
    @include reset-list;  
    li {    
        display: inline-block;    
        margin: {      
            left: 2px;      
            right: 2em;    
        }  
    }
}

nav ul {  
    @include horizontal-list;
}

/* Using SASS */

@mixin reset-list  
    margin: 0  
    padding: 0  
    list-style: none

@mixin horizontal-list  
    @include reset-list  
    li    
        display: inline-block    
        margin:      
            left: 2px      
            right: 2em

nav ul  
    @include horizontal-list

Mixins with Arguments

Mixins can also take arguments, which allows their behavior to be customized each time they’re called. The arguments are specified in the @mixin rule after the mixin’s name, as a list of variable names surrounded by parentheses. The mixin must then be included with the same number of arguments.

lets see a simple example of how to use mixin with argument-

@mixin boxSize($size) {
    width:$size;
    height:$size;
}
div {
    @include square(400px);
    background:#e8e8e8;
}

Inheritance using Extend

Here, @extend is used to share a set of CSS properties from one selector to another. It is a very important and useful feature of SCSS or SASS.

The @extend feature allows classes to share a set of properties with one another. In complicated CSS where many classes are put together, duplication of properties may occurs. The @extend features makes our code less and facilitates us to rewrite it repeatedly.

Suppose that we are styling a toast message, the traditional way to style toast message may look like the below code.

.message:hover, .message--warning:hover {  
    background-color: #ccc;
}

.message--warning {  
    border-width: 3px; 
}

Using extend of SCSS/SASS we can achieve the same as given below.

/* Using SCSS */

.message:hover {  
    background-color: #fee;
}
.message--warning {  
    @extend .message;  
    border-width: 3px;
}

/* Using SASS */

.message:hover
    background-color: #fee;

.message--warning
    @extend .message; 
    border-width: 3px;

Incase you are wondering when to use @mixin and @extend

Both have their place, @extend and @mixin help us to organize our code and makes it easier to reuse across our stylesheet.

Using @extend produces a DRY css. Let’s try to understand this with an example.

.button {
    background: #e8e8e8;
    width: 80px;
}
.button-submit {
    @extend .button;
}
.button-reset {
    @extend .button;
}

After the compilation the above code looks like

.button, .button-submit, .button-reset {
    background: #e8e8e8;
    width: 80px;
}

Here the styles are not repeated, which makes adhere to DRY principles. Also @extend creates relationships between selectors.

Let’s try the same with @mixin

@mixin button($bgColor) {
    background-color: bgColor;
    width: 80px;
}
.button-submit {
    @include button(#e8e8e8);
}
.button-reset {
    @include button(#ffcccc);
}

After the compilation the above code looks like

.button-submit {
    background: #e8e8e8;
    width: 80px;
}
.button-reset {
    background: #ffcccc;
    width: 80px;
}

We can see the styles are repeated here inside each of the different selectors which means the resulting code compiled to CSS doesn’t adhere to DRY principles. Here the advantage is mixins can accept arguments.

So, If we want to inject dynamic values by pass arguments you’ll have to choose @mixin. @extend can be used when we don’t have any arguments to pass.

. . . . .

Thanks for reading this story. Enjoy learning and sharing.

Sourabh Sinha

Add comment

Follow us

Feel free to get in touch. I love meeting interesting people and making new friends.

Any suggestions will be appreciated.