Learn all about CSS Preprocessors with Examples

Sass: Syntactically Awesome Style Sheet

Sass was released in 2006 and it is considered as the oldest CSS preprocessor. The creators of Sass were basically inspired by a templating language called HAML which is used for adding dynamic functionality to an application. The main motive of the creators of Sass was to implement dynamic functionality to the CSS and they came up with the first CSS preprocessor for adding dynamic functionality to the CSS code. Using Sass, the front-end developers can add variables, if-else statements, loops like for, while etc., and also computational logic to their CSS code files.

Sass is basically written in Ruby. Ruby is also used for compilation, and because of this many developers previously used it. Then LibSass came to the market. It was basically built using the C and C++ library.

Developers can directly use LibSass for the compilation of Sass to CSS. And using LibSaas, Sass can be parsed to backend languages such as Node, PHP etc. 

Syntax of Sass:

There are basically two types of Sass syntaxes. We use the earlier indentation based syntax of Sass with the .sass  file extension and semicolons and curly brackets are omitted from the code if we use this earlier .sass extension. 

The modern and advanced Sass syntax is used with .scss file extension, and all the standard CSS syntax like braces and semicolons are followed in this syntax.

Example:

Here we have declared two variables called $primary-color and $primary-bg within our .scss. 

These variable values will be implemented in our HTML elements.

The .scss file code:

$primary-color: seashell;

$primary-bg: darkslategrey;

body {

  color: $primary-color;

  background: $primary-bg;

}

The same code for .sass file:

$primary-color: seashell

$primary-bg: darkslategrey

body

  color: $primary-color

  background: $primary-bg

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

body {

  color:seashell;

  background: darkslategrey;

}

So we have seen above that both the .scss and .sass compiles to the .css code. The earlier .scss syntax was very easy for the developers to write, whereas with the regular CSS, the latest .sass is compliant.

Become a Certified UI UX Expert in Just 5 Months!

With The Best-in-class UI UX ProgramExplore Program

Features of Sass

Using Sass, the developers can declare variables that can be used for storing any value. The variables then can be used anywhere in our project. In Sass, the variables have a scope to either be declared globally or locally. Because of this scope-based declaration, the Sass variables are extremely versatile.

The programming principle called DRY or Don’t Repeat Yourself is followed by Sass, mainly for avoiding duplication in our code. In Sass, we can implement this principle using two features of Sass: mixins and the @extend rule.

• Mixins are used to create a bunch of CSS rules and then apply them to any properties.

Let us see a code implementation for creating a card layout with height, width, background color, and border parameters, using mixin in Sass.

@mixin card($width, $height, $bg, $border) {

  width: $width;

  height: $height;

  background: $bg;

  border: $border;

}

Whenever a new card is to be made, the card mixin is called using the @include rule. After that, we need to pass all the required arguments.

.card-1 {

  @include card(300px, 200px, yellow, red 2px solid);

}

.card-2 {

  @include card(400px, 300px, lightblue, black 1px dotted);

}

You will see that these two calls produce a small card with yellow background and a red border and a larger card with light blue background and a black dotted border.

.card-1 {

  width: 300px;

  height: 200px;

  background: yellow;

  border: red 2px solid;

  padding: 20px;

}

.card-2 {

  width: 400px;

  height: 300px;

  background: lightblue;

  border: black 1px dotted;

  padding: 20px;

}

• @extend rule: The @extend rule plays a vital role in bringing inheritance to the Sass language. For using the design elements that share some styling characteristics, this @extend rule is very helpful and useful. 

Now, let us see the code implementation for adding the properties of any class to other classes using the @extend rule.

.class-1 {

  width: 100%;

  height: auto;

}

.class-2 {

  @extend .class-1;

}

• Nesting: @extend rule extends all nested selectors as Saas also allows Nesting. It is a significant part of programming as it improves code readability and maintainability.

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

article {

  p {

    line-height: 1.5; 

  }

  img {

    max-width: 100%;

  }

}

Conditionals and loops are the most demonstrative parts of Sass. It is used to write CSS rules just like in any scripting language. Sass has a built-in if() function and @if directive for checking conditional statements and @for, @each, and @while loops for giving the output for the same set of styles. 

The partial Sass files with small code blocks can be reused in other Sass files using @import. So, we can say Sass also supports modularity.

Sass has some in-built functions that we can use to perform mathematical functions, convert or mix colors, and manipulate strings. We can also create our own custom Sass functions. 

Now let us go through the tools and examples for Sass.

Tools and Examples for Sass

Sass can activate the developer community and many libraries as it has an incredible ecosystem. Out of all the frameworks written in Sass, the most popular frameworks are Bootstrap and Zurb Foundation which add extra traction to the application after applying Sass.

To increase or enhance the languages' functionality, Sass uses mixin libraries and the authoring frameworks like Compass and Bourbon. 

Companies like Airbnb, Kickstarter, Hubspot, etc., use Sass in their production sites.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program

LESS: Learner Style Sheets 

LESS, inspired by Sass, was released in 2009 after the release of Sass. Many of the features of Sass such as variables, nesting, mixins are also present in LESS or Learner Style Sheets. 

The LESS CSS preprocessor is a JavaScript library that extends the default functionalities of CSS. We need Node.js to install and run the LESS compiler. However, we can also compile LESS on the fly by adding .less files and the LESS converter to our HTML page's <head> section.

Syntax:

LESS uses standard CSS syntax with .less extension. So, if CSS is already known to someone, it will be a cakewalk to pick up LESS for that person. But there are some more elements available in LESS that are not available in CSS, such as @sign for variables.

So a valid .css file can also be considered as a valid .less file.

Let’s look at the code example which was used for Sass and now is being implemented in LESS.

Example:

@primary-color: seashell;

@primary-bg: darkslategrey;

body {

  color: @primary-color;

  background: @primary-bg;

}

It compiles to the same CSS as can be seen below: 

body {

  color: seashell;

  background: darkslategrey;

}

[Note: You can go through the official documentation for LESS to understand it better.]

Features of LESS

Like Sass, the variables declared in LESS are also scope-based, which means they can only be used or accessed from that scope where it was defined. They are not only used in CSS rules but can also be used in URLs, property names, selectors, and @import statements. For example, if a URL path needs to be stored at many places, it can be stored in a variable, and we can access it from anywhere we want.

@uploads: “../wp-content/uploads/”;

header {

  background-image: url(“@{uploads}/2018/03/bg-image.jpg);

}

The compiled CSS code looks like the below code:

header {

  background-image: url("../wp-content/uploads/2018/03/bg-image.jpg");

}

To reuse a similar set of codes many times, we can use LESS mixins just like in Sass. For implementing basic conditional logic in LESS, specific guarded mixins are provided by LESS. 

Let us see a code example for providing two distinct colors (black and white), and those colors will be applied based on the lightness of the background. To check the background's brightness, we have used a LESS function called lightness.

.text-color (@bg-color) when (lightness(@bg-color) >= 50%) {

  color: black;

}

.text-color (@bg-color) when (lightness(@bg-color) < 50%) {

  color: white;

}

.text-color (@bg-color) {

  background-color: @bg-color;

}

.card-1 {

  .text-color (yellow);

}

.card-2 {

  .text-color (darkblue);

}

When the LESS gets compiled to CSS, those guarded mixins are indicated as .text-color.

.text-color (@bg-color) when (lightness(@bg-color) >= 50%) {

  color: black;

}

.text-color (@bg-color) when (lightness(@bg-color) < 50%) {

  color: white;

}

.text-color (@bg-color) {

  background-color: @bg-color;

}

.card-1 {

  .text-color (yellow);

}

.card-2 {

  .text-color (darkblue);

}

In LESS, :extend pseudo word is used to extend selectors and merge features to aggressive values from multiple properties. So, we can say DRY and inheritance principle are also followed in LESS.

Tools and Examples for LESS

It was a huge hit to the popularity of LESS when Bootstrap decided to move Bootstrap4 from Sass to LESS. There are many LESS frameworks available; out of all those frameworks, Cardinal is the most famous. There are also many LESS libraries like LESS Hat, but it is not as famous as Compass in Sass.

You can scroll through the curated list called Awesome Less, which is available on Github. You might also encounter LESS on the production sites like WeChat, IndiegoGo, etc. 

Stylus

Stylus was launched in 2010, just after the launch year of LESS. It was written in NodeJS, so Stylus can easily be integrated into the Node projects.

The powerful logical abilities of Sass and straightforward setup of the LESS are combined in Stylus. 

Syntax:

Many developers praise Stylus for its flexible and terse syntax. We can write code in various ways using the .styl extension. The standard syntax of CSS can be used in Stylus and omit the use of punctuations like semicolons, colons, brackets, etc. 

Let us see the code implementation of Stylus in the previous example (used in Sass and LESS):

Example:

primary-color = seashell;

primary-bg = darkslategrey;

body {

  color: primary-color;

  background: primary-bg;

}

The brackets can also be removed:

primary-color = seashell;

primary-bg = darkslategrey;

body

  color: primary-color;

  background: primary-bg;

The brackets and semicolons both can be removed:

primary-color = seashell

primary-bg = darkslategrey

body

  color: primary-color

  background: primary-bg

All the punctuations can also be removed:

primary-color = seashell

primary-bg = darkslategrey

body

  color primary-color

  background primary-bg

However, you cannot remove the assignment operator (=) as it indicates the declaration of a new variable.

Also, you must ensure proper indentation or the code will not compile as Stylus is a pythonic (indentation-based) language.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program

Features of Stylus:

Some of the basic features of Stylus are similar to those of Sass and LESS, for example, the use or functionality of mixins in Stylus. The main attention should be provided to the equal (=) sign as variables have a very clear syntax. 

/* Stylus */

primary-color = seashell

Stylus mixins working procedure is the same as SASS and LESS. For instance, for storing and reusing the custom style rule sets, we use mixins.

The unique transparent mixin feature provides automatic vendor prefixes to newer properties with instrumental browser support. For example, vendor properties like keyframes are automatically added by Stylus.  

For the experimental user-select property, a transparent mixin can be created, for instance, and we can reuse it as many times as we want.

 /* Stylus */

user-select(n)

-webkit-user-select: n

-moz-user-select: n

-ms-user-select: n

user-select: n

div

  user-select(none)

To a CSS selector, such as div, the user-select transparent mixin is needed to be added, a value such as none is required to be assigned, and then all the vendor prefix rules can be generated by Stylus.

 /* Compiled CSS */

div {

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

The vendor prefixes are added automatically to the keyframes by Stylus, so for frequently building the @keyframes animations, it can be considered as an ideal preprocessor.

For manipulating the colors and units for doing calculations, such as finding out the average, finding out the minimum, finding out the maximum or finding out minimum, or for matching patterns or doing any other types of actions, there are many built-in functions available in Stylus. For example, for directly finding out the grayscale equivalent of any color, we can directly use the grayscale() Stylus function.

/* Stylus */

grayscale(blue)

Besides these in-build functions, just like SASS, Stylus can create custom functions.

There are many other things like powerful conditional logic. It has if/ else/ if-else, and unless/ else conditional statements. The unless conditional is the logical opposite of if, or it can also mean a “not if” statement. Postfix conditionals and looping that are used for/in construct can also be used. 

There are some advanced features in CSS preprocessor Stylus that are very useful.

• property lookup, used for referencing the properties without assigning them to the variables, and 
• partial reference for accessing a certain number of levels of nested selectors.

Tools and Examples of Stylus:

Mixin libraries like Nib and Ride.css in Stylus provide ready-made cross-browser Stylus mixins to developers. There are some excellent frameworks like Basis and Kouto Swiss in Stylus, but they are not as famous as Bootstrap and Foundations. The companies like Accenture, HackerEarth, Accenture, etc., are the corporate users of Stylus.

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion

In this article, we learned that Sass has looping and logical abilities, and you can create custom functions using Sass; it can be considered a programming language. It has a very popular community and also a huge ecosystem. Many popular frontend frameworks use Sass. Whereas in the case of Stylus, it is essential to integrate it with the projects made of Node. We also learned that there are only a few logic-based features in LESS compared to Sass and Stylus. LESS is considered the best on the serverless architecture because it can easily be compiled on the frontend frameworks and provides good built-in functions.

If you wish to learn more such concepts, you must visit Simplilearn, which provides an excellent course on Full Stack Web Development. And to further sharpen your skills and advance your career, you can visit SkillUp. This Simplilearn initiative offers several free online courses that can help you enhance your knowledge and skills and improve your career prospects.