Introduction to LESS and SASS CSS Preprocessors

Introduction to LESS and SASS CSS Preprocessors

Many CSS styles are repeated over and over while working on the design of a web site. It can become annoying, right? But, there is a solution. You can write less code using LESS and SASS CSS preprocessors.

What are CSS Preprocessors?

LESS (Leaner CSS) and SASS (Syntactically Awesome Style Sheets) are open source style sheet languages that allow variables, operators, functions, and many other techniques, which help create a more maintainable CSS.

Both LESS and SASS can be precompiled to plain CSS files or compiled on the server side, while LESS also supports real-time client-side compilation using less.js.

LESS Installation

LESS can be used via CLI (command-line interface) or client-side. For command-line usage, it first needs to be installed via node.js package manager:

npm install -g less

CSS is then compiled using the following code:

lessc styles.less > styles.css

If you want to output minified CSS, add -x parameter to the lessc command:

lessc styles.less > styles.css -x

The other way of using LESS is dynamic client-side compilation, where LESS style sheets are included in HTML:

 link rel="stylesheet/less" type="text/css" href="styles.less" />

After that, less.js is downloaded and included in HTML as well:

SASS Installation

Before installing SASS, you will have to install Ruby first. In Linux, that can be done through the apt package manager, while Windows users can use Ruby installer. Mac users can skip this step, as Ruby is pre-installed on this operating system.

After installing Ruby, execute the following command from the command prompt or terminal window:

gem install sass

Or, in case you get an error message:

sudo gem install sass

To compile a SASS style sheet to CSS, use the following command:

sass --watch --style=compressed style.scss:style.css

Variables in LESS

Variables in LESS are like constants in programming languages. They can be used to store a value and use it throughout the code. For example:

@nice-blue: #5B83AD;#header {  background: @nice-blue;}

This LESS code would output the following CSS code:

#header {  background: #5B83AD;}

Note that variables can be defined only once.

Variables in SASS

In SASS, variables begin with the dollar sign.

$nice-blue: #5B83AD;#header {  background: $nice-blue;}

Nested Rules in LESS and SASS

Both LESS and SASS allow nesting CSS rules, making the code more readable and similar to HTML structure.

#header {  background: #5B83AD;  .nav {    height: 60px;  }  .logo {    float: left;    width: 300px;  }}

This LESS code is the equivalent of:

#header {  background: #5b83ad;}#header .nav {  height: 60px;}#header .logo {  float: left;  width: 300px;}

While nesting the rules, parent selector (&) can be used:

a {  color: blue;  &:hover {    color: green;  }}

This LESS/SASS code is the same as:

a {  color: blue;}a:hover {  color: green;}

Operators in LESS and SASS

Any color, number or variable can be used as operands in mathematical operations. Let’s see a few simple examples:

@default-margin: 5px;@default-padding: @default-margin * 2;@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header {    background: @light-blue;    padding: @default-padding;}

The above LESS code is the same as the following CSS:

#header {    background: #6c94be;    padding: 10px;}

Operators are also supported in SASS.

Functions in LESS

LESS supports many functions which can transform colors, manipulate strings and do mathematical operations.

@base: #f04615;@width: 0.5;.class {  width: percentage(@width); // returns 50%  color: saturate(@base, 5%);  background-color: lighten(@base, 25%);}

The list of all functions in LESS can be found in function reference.

Functions in SASS

The functions from the LESS example are also available in SASS. To see the full list of SASS functions, check the SASS function reference.

Mixins in LESS

Mixins are “mix-ins” i.e. styles from one CSS id or class used in another id or class. Let’s see the example:

.heading {   text-align: center;   text-transform: uppercase;   font-family: Arial, sans-serif;   font-weight: bold;   margin: 0;}h1 {   font-size: 22px;   .heading;}

This code is the same as:

h1 {   text-align: center;   text-transform: uppercase;   font-family: Arial, sans-serif;   font-weight: bold;   margin: 0;   font-size: 22px;}

Mixins in SASS

SASS also supports mixins, but the syntax is slightly different. Mixings are defined using “@mixin” directive, and included using “@include” directive:

@mixin heading {   text-align: center;   text-transform: uppercase;   font-family: Arial, sans-serif;   font-weight: bold;   margin: 0;}h1 {   font-size: 22px;   @include heading;}


LESS and SASS are very similar style sheet languages, but using any of them will help you write better, more maintainable style sheets than you would using pure CSS.

Share the Post:
XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes

ransomware cyber attack

Why Is Ransomware Such a Major Threat?

One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing

data dictionary

Tools You Need to Make a Data Dictionary

Data dictionaries are crucial for organizations of all sizes that deal with large amounts of data. they are centralized repositories of all the data in organizations, including metadata such as