WHAT IS CSS PREPROCESSOR??

A CSS preprocessor is a scripting language that extends CSS and is compiled into regular CSS syntax. A browser can only understand CSS, which at times may not be enough to write clean and reusable rules. It's an advanced way of writing CSS that extends the basic functionalities. This advanced code is compiled later than the normal CSS code that the browser will understand. CSS preprocessors allow you to create variables, media queries, mixins, nesting, loops & conditionals, and importing. Examples of some CSS preprocessors are SASS (Syntactically Awesome Style Sheet), LESS (Learner Style Sheets), and Stylus.

REASONS FOR USING CSS PREPROCESSOR

• It will make your CSS codes more organized.
• It will make your CSS DRY (don't repeat yourself).
• It will make your codes easier to maintain.
• It will save you time.

In this article, we will be focusing more on SASS and its features.

Syntactically Awesome Style Sheet (SASS):

This is an example of a CSS Preprocessor and is very popular & preferred amongst developers. It allows the creation of variables, import, extend, nesting and mixins. SASS was developed with Ruby.

SASS INSTALLATION:

Read more about Sass at the official Sass website: sass-lang.com

Alternatively, if you use Visual Studio Code you can install the live sass compiler extension and set it up using the following steps below.

• Go to your extension marketplace on VScode and search for live sass compiler, then install it.

• Create an HTML file, and you can name it index.html

• Create another file and name it style.scss

• Go to the eye button at the bottom of the VSCode screen that says (Sass watch), It will translate your Sass (.scss) file into a regular CSS (.css) file and create one.

• Now go to your HTML file and link the new CSS (style.css) to it the regular way. Now whatever you write in the Sass file will be translated into CSS and it will update the CSS file.

SYNTAX OF SASS:

There are two types of SASS syntax, we have the .sass file extension, where we have semi-colons and curly brackets are omitted when writing the code. We also have the .scss file extension, which is the modern type and is used mostly. The code has semi-colons and curly brackets.

For example; The .scss file code:

$primary-color: white;

$primary-bg: black;

body {

  color: $primary-color;

  background: $primary-bg;

}

The same code for the .sass file:

$primary-color: white

$primary-bg: black 

body

  color: $primary-color

  background: $primary-bg

Now let us see the compilation from .scss/.sass to .css.

body {

  color: white;

  background: black;

}.

So we have seen above that both the .scss and .sass compile to the .css code. The earlier .scss syntax was easy to write, whereas, with the regular CSS, the latest .sass is kind of complex.

FEATURES OF SASS WITH EXAMPLES:

VARIABLES:

These are containers for storing information that you can use anywhere in your code. Examples of information to store are colors, font size, font family, width, etc. Sass uses the $ symbol, followed by a name, to declare variables.

.SCSS file

$myFont: Rubik, sans-serif;
$myColor: blue;
$myFontSize: 20px;
$myWidth: 550px;

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

.box {
  width: $myWidth;
}

CSS OUTPUT:

body {
  font-family: Rubik, sans-serif;
  font-size: 20px;
  color: blue;
}

.box {
  width: 550px;
}

NESTING:

Nesting can be used when some selectors share the same parent.

.scss file

font: {
  family: Rubik, sans-serif;
    size: 20px;
      weight: bolder;
      }

text: {
  align: center;
    transform: lowercase;
      overflow: hidden;
      }

CSS Output

font-family: Rubik, sans-serif;
font-size: 20px;
font-weight: bolder;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

@SASS import:

It allows you to import a .scss file into another .scss file, by doing this it allows you to divide your code into different sub-files and organize them all in a .scss file. Examples are @import "colors"; @import "fonts";

_fonts.scss

body{
Font-size: 20px;
Font-family: Rubik, sans serif;
Font-weight: bold;
}

.scss file

@import " fonts";

#container {
   background-color: black;
   Color: white;
}

CSS Output

body {
    Font-size: 20px;
    Font-family: Rubik, sans serif;
    Font-weight: bold;
}

#container {
     background-color: black;
     Color: white;
 }

SASS MIXINS:

@mixins function allows you to create CSS codes that can be used throughout your code. @include let you apply the mixin function in your code.

Scss syntax

@mixin display-content {
  color: blue;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid red;
}

. scss file

#container {
      @include display-content;
      background-color: yellow;
 }

CSS Output

#container {
     color: blue;
     font-size: 20px;
     font-weight: bold;
      border: 1px solid red;
      background-color: yellow;
  }

SASS @extend:

The @extend function in Sass allows one to share a set of CSS properties from a selector to another selector in the same code.

.scss file

.bgd-button {
    color: blue;
    Padding: 15px 10px;
    Border: 1px solid red;
 }

.bkm-button {
     @extend .bgd-button;
      background-color: black;
}

CSS Output

.bgd-button {
    color: blue;
     Padding: 15px 10px;
     Border: 1px solid red;
 }

 .bkm-button {
         color: blue;
         Padding: 15px 10px;
         Border: 1px solid red
          background-color: black;
}

CONCLUSION

• Sass facilitates you to write clean, easy and less CSS codes.
• It contains fewer codes so you can write CSS quicker.
• It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.

You will definitely want to try it out especially as a frontend developer.