Why to use SASS instead of CSS ?

SASS (Syntactically Awesome Style Sheet) is a CSS preprocessor. It is a scripting language that is compiled into regular CSS, allowing you to use features such as variables, nested rules, and mixins in your stylesheets. It adds additional features and functionality to CSS. SASS can help to make your CSS more organized and easier to maintain, as well as make it easier to create complex styles. The Preprocessor is a program that inputs data to produce output that is used as input to another program. The output of sass acts as input for CSS. In this article, we will be learning about SASS syntax, variables, nesting in SASS, and the advantages and disadvantages of SASS over CSS

Generally, SASS is preferred to be used instead of CSS, as Sass is much rich in features than CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff. Writing all the styling code in a file makes it difficult to maintain and find bugs. SASS allows to make of many stylesheets for different components of the webpage and makes it easier to maintain styling. The  Sass code is not understandable by the browser itself. So, it requires a Sass pre-processor that helps to convert Sass code into standard CSS & this process for converting the Sass code to standard CSS is known as Transpiling.

We often see two types of file extensions while working with sass, ie, Style.sass & Style.scss. Sass is an older syntax, which relies on indentation and lines for syntax rather than semicolons and brackets.

SASS syntax:

/* Sass syntax */
body 
    box-sizing: border-box
    font-size: 100%
div
    background-color: green

SCSS syntax: As its name suggests, it uses every valid CSS3 styling in SCSS as well.

/* Scss syntax */
body { 
    box-sizing: border-box;
    font-size: 100%;
}
div {
    background-color: green;
}

Generally, it is preferred to use the .scss file extension because the syntax is the same as css3 while in the .sass extension syntax depends on indentations.

SASS Variables: SASS variables let you reuse the styling. With SASS, you can store information in variables, like:

• Strings
• Numbers
• Colors
• Lists
• Booleans
• Nulls

Syntax: SASS uses the $ symbols, followed by a name of a variable.

$variableName: propertyValue;

Example: This example describes the declaration of the SASS variables.

$myFont: 'Rubik', san-serif;
$myColor: green;

body{
  font-family: $myFont;
  color: $myColor;
}

SASS Variable Scope: SASS variable scope are valid at the nesting level where they are defined. We can change the value of a variable inside the nesting of any property and SASS variables that were declared inside any tag has local scope whereas variables declared outside the tag has global scope.

Example: This example describes the basic usage of the SASS Variable & its scope. In SCSS, we need to declare the variable only once which contains multiple values & that variable can be utilized throughout the code. Whereas, in CSS, we need to declare it wherever that variable gets used.

$myFont: 'Rubik', san-serif; /* This variable has global scope */
$myColor: green; /* This variable has global scope */

body{
  $myFont: 'Roboto', san-serif; /* This variable has local scope */
  font-family: $myFont; /* Roboto font is used */
  color: $myColor;
}

h1{
  font-family: $myFont; /* Rubik font is used */
}

Compiled CSS:

/* This variable has global scope */
/* This variable has global scope */
 body {
    /* This variable has local scope */
     font-family: 'Roboto', san-serif;
    /* Roboto font is used */
     color: green;
}
 h1 {
     font-family: 'Roboto', san-serif;
    /* Rubik font is used */
}

It's the default behavior of sass variable scope, to change the local scope behavior we use !global.

SASS !global: The !global is used to change the scope of variables from local to global.

/* This variable has global scope */
$myFont: 'Rubik', san-serif;
/* This variable has global scope */
$myColor: green; 

body {
   /* This variable has local scope */
  $myFont: 'Roboto', san-serif !global; 
  
  /* Roboto font is used */
  font-family: $myFont; 
  color: $myColor;
}

h1{
  /* Roboto font is used because 
  overwrites the variable in body tag */
  font-family: $myFont;
}

Compiled CSS:

/* This variable has global scope */
/* This variable has global scope */
 body {
    /* This variable has local scope */
     font-family: 'Roboto', san-serif;
    /* Roboto font is used */
     color: green;
}
 h1 {
     font-family: 'Roboto', san-serif;
    /* Roboto font is used because overwrites
   the variable in body tag */
}

SASS Nesting: SASS allows you to nest CSS selectors. It makes our work very efficient, we don’t have to repeat outer selectors again and again. We can write nested selectors in the order they appear in the HTML file (i.e., Parent-Outer and Child-Inner Selector form ). SASS will automatically do the work of combining.

ul {
    list-style-type: none;

    li {
        display: inline-block;
        
        a {
            text-decoration: none;
            display: inline-block;
            padding: 10px 15px; 
            color: blue;
        }
    }
}

Compiled CSS:

ul {
    list-style-type: none;
}

ul li {
   display: inline-block;
}

ul li a {
    text-decoration: none;
    display: inline-block;
    padding: 10px 15px;
    color: blue;
}

Benefits of using SASS over CSS:

• Nesting: SASS allows you to nest your styles, which can make your code more organized and easier to read.
• Variables: SASS allows you to use variables, which can make it easier to maintain your stylesheets and update your designs.
• Mixins: SASS allows you to create mixins, which are reusable blocks of code that can be included in multiple places in your stylesheets.
• Functions: SASS provides a range of built-in functions that can be used to perform calculations and manipulate values in your stylesheets.
• Improved code organization: SASS provides features such as partials and imports, which allow you to organize your code into smaller, more manageable files.

Conclusion: This article has covered the important concept of SASS, like Sass VS SCSS, SASS variables, and nesting. Overall, SASS can be a powerful tool for improving the organization and maintainability of your stylesheets, but it may not be the best choice for everyone due to the additional learning curve and preprocessing requirements.