Mar
5
2018

Sass and LESS: An Introduction to CSS Preprocessors

Article by Janani Dabare

What is a CSS Preprocessor?

The basic idea of a css preprocessor is a scripting language that extends regular CSS. When compared to the last few years, there were lots of repetitions in the CSS and html which required tasks to be styled again and again. Tasks which includes color codes, repeat throughout the stylesheet. These handful of inefficiencies have been identified and revised in preprocessors.

In preprocessors, CSS is written in a slightly different format and then a specific compiler app or a script is used to compile that scripted language into a regular CSS syntax that a browser is expecting to use. Preprocessors provide us the facility to write future-ready and easily maintainable code which saves time and energy. These will also increase the productivity of the CSS and decrease the line of codes.

Benefits of using a preprocessor

Preprocessors provide extra leverage over CSS by providing additional facilities. Below is a list of benefits.

Saves time by being able to create reusable pieces of code.
Provide modularization – Makes it easy to make reusable modules which enable developers to use variables to change colors, visual aspects and fonts without searching and replacing.
Ability to use variables, functions, nested rules or even math operations.
Easy code maintenance and being able to keep the code more organised.
Helps to avoid cross browser compatibility issues by using mixings.

There are many preprocessors such as SASS, LESS, Stylus, etc Among all preprocessors, SASS and LESS are the most popular preprocessors as to date. Below is an example of what a preprocessor does.

Drawbacks of using a preprocessor

Similar to any other technology, CSS preprocessors also comes with few trade-offs. Below is a list of major drawbacks.

Debugging can be harder – CSS line numbers are irrelevant when trying to debug the code. Due to this reason, debugging can make things harder and time consuming.

The generated CSS might be huge – Even though the source file might be small, the generated CSS could be huge. In some cases this might have an effect on the application’s performance.

Maintenance – For an example if we need to change the color, we need to update the name and value of the variable, then the variable concept become pointless.

Extra tools and complexity – Preprocessors require extra tools, such as ‘Source Maps’ to handle the minified CSS which can add complexity to the project. For more information refer “Using source maps with Sass 3.3”

Popular CSS Preprocessors - Sass and LESS

Syntactically Awesome Stylesheets (SASS) – sass-lang.com

SASS was introduced in 2006. Compared to other preprocessors, SASS adds extra features which requires more learning time. It has more complex and powerful conditionals and better module management.

Pros	Cons
SASS still looks like CSS and easy to read.	Needs Ruby to run.
Even complicated features are easy to understand.	Needs extra setup.
Every CSS can be scripted into powerful SASS scripts.
Better structure and nesting.
Bigger community with continues updates.

Learner CSS (LESS) – lesscss.org

This was introduced in 2009 which created new implementation of scss syntax. LESS is written in Javascripts and needs Node.js or a web browser to run. LESS is also backward compatible.

Pros	Cons
Looks more like CSS.	Limited conditions and inheritance, which do not allow to do complicated conditions.
Less use variables which can be used to reference in anywhere.	Initial setup takes time.
Easy documentation with more examples.
Better for debugging, since it clearly says where the issue is.

Key features in Sass and LESS

Variables are used to store information that will be reused multiple times. Variables are used to store colours, border styles, or any CSS value you think you will want to reuse. In sass, the ‘$’ symbol is used to create a variable and ‘@’ is the symbol used in LESS. Below example shows how variables are used.

Sass

$primary-color: #333;
$font-size: 16px;
 
body {color: $primary-color;}
a{font-size: $font-size;}

LESS

@primary-color: #333;
@font-size: 16px;

body {color: @primary-color;}
a {font-size: @font-size;}

Compiled CSS

body {color: #333;} 
a {font-size: 16px;}

In the above example the ‘primary-color’ and ‘font-size’ variables are used to define body text color and anchor tag font size. Once the code is preprocessed, it will output normal CSS with the assigned values to the body text and links. As you can see variables are extremely handy and provides the comfort of reusing the same values multiple times while helping to be consistent throughout the application.

Nesting

Usually CSS does not have a nested and visual hierarchy. But in Sass and LESS, writing nested CSS is possible. However it is generally considered as a bad practice to have overly nested rules. Because in the end this will become hard to maintain and understand. Below is an example to understand a nested Sass/LESS and the compiled css.

Sass

table {border-collapse: collapse;
         tr { border: 1px solid black;
            th { border: 1px solid red;
                }
            }
      }

LESS

table {border-collapse: collapse;
      tr {border: 1px solid black;
         th {border: 1px solid red;
            }
          }
      }

Compiled CSS

table {border-collapse: collapse;}

table tr {border: 1px solid black;}

table tr th {border: 1px solid red;}

Import

As the name itself explains, @import is used to import multiple pieces of classes into the main CSS when needed. This enables to split the CSS into smaller and more maintainable portions and include when required. See the below example.

Sass

// _general.scss (file name) 
html, body, ul, ol { padding: 5px;}
 
//construct.scss (file name)
@import 'general';
 
body {background-color: #f5f5f5;}

LESS

// _general.less (file name)
html, body, ul, ol {padding: 5px;}
 
//construct.less (file name)
@import 'general';
 
body {background-color: #f5f5f5;}

Compiled CSS

//construct.css (file name)
html, body, ul, ol {padding: 5px;}

body {background-color: #f5f5f5;}

Sass/LESS will take the file that you want to import and combine it with the file you are importing into so you can have a single CSS file. Also as in the above example when @import is used, you can import the ‘general’ file to the ‘construct’ CSS file.

Mixins

Mixins allow to reuse properties throughout a stylesheet,. Rather than going through the stylesheet and changing multiple properties, we can only change the mixin properties.

Both Sass and LESS define mixins bit differently. Sass has the @mixin directive while Less define it with the class selector.

Sass

@mixin warning($borderWidth) {
  border: $borderWidth solid #F00;
  color: #F00;
}

.generic-warning {
  padding: 20px;
  margin: 4px;

  @include warning(2px); /* Applies styles from the mixin */
}

LESS

.warning(@borderWidth) {
  border: @borderWidth solid #F00;
  color: #F00;
}

.generic-warning {
  padding: 20px;
  margin: 4px;
  .warning(2px); /* Applies styles from the mixin */ 
}

Compiled CSS

.generic-warning {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}

Operators

One of the unique features in preprocessors are operators which allow to perform mathematical operations. This is not available in CSS. Using this operator, we can perform more complex and dynamic codes.

Sass

$height: 200px

.div1 { height: $height * 2;}

LESS

@height: 200px

.div1 { height: @height * 2;}

CSS

div { height:100px;}

Why Sass is better?

CSS preprocessors are accurate and help to streamline the development work. It reduces the line of code in a stylesheet and make web designer’s life much easier. Using CSS preprocessors we can perform computations and do dynamic styling. They have their own unique ways to accomplish tasks, which will reduce repetition of codes by using variables and mixins.

Compared to other CSS preprocessors, Sass is the most commonly used and most popular. But there are other similar preprocessors as well. Lets see what are the features that makes SASS highlighted among all.

When comparing LESS and Sass , it’s clear that Sass has more programming background with the use of different conditional features such as if/else statements, for loops, while loops and each loops. Therefore it allows to perform more complex math equations in your stylesheet. Compared to LESS, Sass has a better support for selector nesting which helps to keep the stylesheet more readable.

The other best thing about Sass is, it has a bigger developer community which keeps on updating new features contentiously. Moreover Sass has grown a long way that most of the major frontend frameworks like bootstrap and foundation run on Sass css preprocessors.