Cascading StyleSheet(CSS) Pre-processors

CSS, that stands for Cascading StyleSheet, is a styling language that is well understood by the browser. Responsible for controlling layouts of multiple webpages, it was first proposed in 1994 by Hakon Wium Li. In the blog, we will come to learn about CSS Pre-processors.
CSS is easy to learn and implement. With a lot of features, it has for sure made life smooth.
A complex situation arises only until we are into a big, really big project. That’s when the CSS becomes long, complex, hard to maintain and eventually, boring. Here comes the role of a pre-processor.

What is a pre-processor?

In a layman’s language, A pre-processor is a program that takes a certain type of data as input and converts it into another form of data for output.
For CSS, the following is a list of pre-processors.
• SASS
• SCSS
• LESS
Preprocessors help modularize your code by breaking into chunks, improving readability and faster processing. They have advanced syntaxes.
They are all great, having their own features and advantages.
Let me introduce a few advantages of using pre-processors in CSS:
• A strict NO to repetitions: Time-saver and Number of line-saver.
• Hierarchical Code: Syntax {within syntax {within syntax}} better known as ‘Nested Syntax’
• Variables, Loops, Mixins: $Efficient and $Organized code
• Mathematical and Operational Functions: ‘lighten’ or ‘Darken’ sort of functionality
• Easy peasy: Code which is Easy to write, easy to read, easy to understand
CSS pre-processors have their way of working. They compile the pre-written code using a special compiler and then use that to create a CSS file which is then referenced by the particular HTML file. Using a pre-processor is same as using a CSS, just with a variety of options and functionality.
Since they are extremely useful, powerful and versatile, we will go into the depth of the popular ones in later articles.

SASS and SCSS

Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

SCSS meaning Sassy CSS, derived from SASS(Syntactically Awesome Stylesheet), is the most popular form of CSS used. It has .scss file and is midway through the actual CSS and.SASS file.

These are nothing but 2 different syntaxes of Sass itself. Everything that’s available in SCSS is available in Sass as well.
SASS has an indentation-based syntax which excludes brackets. The special characters ! and . are used for variable and specific element-level attributes.

Code written in SASS:
/ /Variable declaration
!main-color= maroon

.home-button
color= !main-color
width= 100%

Code written in SCSS:
// Variable
$main-color= maroon

.home-button {
color: $main-color;
width: 100%;
}

Code in CSS looks like:

.my-element {
color: maroon;
width: 100%;
}

Installation of SASS :

• Install Node.js
• Install using NPM – eg: npm install -g sass
• Install Node-Sass – npm install node-sass (Node-sass is an NPM package that compiles Sass to CSS very quickly).
  After installing SASS correctly, you can keep a watch on any individual file or entire directories using the –watch flag. Below is the syntax :
  sass –watch main.scss:final.css

Features of CSS Pre-processors:

Variables:

A ‘$’ symbol is used to define a variable.SASS supports 2 types of variables: Local and Global.
Any variable present inside a selector is in the local scope. On the other hand, any variable present outside a selector is in the global scope. And can be accessed anywhere in the entire stylesheet where it is defined.

For example, this is a global variable:

$all-p-color: red;

The same, when used inside a selector, becomes a local variable.

@mixin paragraph-style {
$bg-color: green;
color: $bg-color;
}

Interestingly, here ‘Mixin’ comes into picture which is another feature of pre-processors.
We have defined a mixin and the paragraph colour is visible only inside the scope of the paragraph-style mixin.
We must call the mixin separately as follows:

p{
@include paragraph-style;
font-size: 13px;
}

This compiles in the following format:

p {
background-color: green;
font-size: 13px;
}

In case we try to access the mixin variable separately inside another selector (in this case -> $bg-color), we are bound to get an undefined Variable’ error. Give it a try😉

Mixins:

Mixins are property-value pairs that define patterns and can be reused across the stylesheet. Mixins are kind of functions. They can accept parameters and also there’s a way to write optional ones too.
As we have seen a glimpse above in the SASS way, mixins must follow the base pattern as below:

@mixin (name of mixin)
{
(property-value pairs)
}

any selector {
@include (name of mixin)
}

Let’s take a look at the SCSSway of mixin:

@mixin float-right {
float: right;
}

.alert-box {
@include float-right;
font-size: 10px;
background-color: red;
}

Example of parameterized mixin:

@include inner-side-border($side, $color);

Mixins can have default arguments as well. We can use loops for manipulating the arguments according to requirements. Below is a quick sample:

@mixin font-type-sans($weight: false , $color: false, $size: false,$lhgt: false)
{
//css content here
font-family: 'Source Sans Pro', Arial, Helvetica,sans-serif;

@if $weight
{
font-weight: $weight;
}
@if $color{ color: $color; }
@if $size { font-size: $size; }
@if $lhgt{ line-height: $lhgt; }
}

Mathematical functions:

The Math operations or functions are used for performing standard arithmetic on property values inside a selector. The math functions used, allow mathematical expressions to calculate values. Functions like calc(), ceil(), floor(), max(), min() etc.. are used.

Examples here:

math.floor($number); // same for all functions like math.max($number), math.ceil($number)
floor($number); => returns a nearest lowest whole number.

math.floor(2.8); =>2
math.floor(7.1) =>7

math.min(36px, 78px, 90px); => 36px
math.max(36px, 78px, 90px); => 90px

We can pass a variable as well in place of numbers and apply the same math functions.
See the below sample:

$heightGrp: 36px, 78px, 90px;
math.max($heightGrp...);=> will return 90px

We can also use expressions that include addition (+), subtraction (-), multiplication (*), and division (/).
Example:

.main-container {
width: 100%;
}

.offer-banner {
width: 600px / 960px * 100%;
background-color: maroon;
padding: 5px;
border: solid black 2px;
box-shadow: 2px 4px;
}

aside[role="secondary"] {
float: left;
border: solid black 1px;
width: calc(100% - 200px);
}

Nesting:

When the selectors are defined inside another selector, is where Nesting takes place; bringing in readability, ease of use and of course, a lesser number of lines. Nesting implements the logical arrangement of the code introducing visual hierarchy in CSS.

.outer-box {
border: solid black 1px;
.inner-child-box {
border: solid red 2px;
width: 100px;
}
}

This code will eventually get compiled as follows:

.outer-box {
border: solid black 1px;
}
.outer-box .inner-child-box {
border: solid red 2px;
width: 100px;
}

Nesting is beneficial for use in simple, small-scale sites. The larger/bigger projects should avoid the use of nesting due to parsing and performance issues.

Selector Inheritance:

Inheriting properties from selector A into another selector B i.e. extending the CSS property-value pairs in one selector into other selector is Selector Inheritance. This is done using the keyword ‘@extend’. The selector A is written using the @extend keyword, inside selector B, along-side the properties specific to selector B.

Let’s consider an example of a container.
There’s a main container with the following properties:

.main-container {
width: 150px;
border: 1px solid;
float: left;
padding: 10px;
text-align: center;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}

Now supposedly there are 4 more containers, with exception of width and border colour. So, they can be written as below:

.secondary-container{
@extend .main-container
width: 100px;
border: solid red 2 px;
}

In this case, secondary-container will take all the properties of main-container. The 2 properties – width and border- that are specific to secondary-container will have new values, overriding the ones mentioned in the main-container. Thus, Inheritance brings reusability to our CSS and reduces the lines of code considerably. Inheritance can be mixed up with Mixins easily. But, parameters can’t be passed in @extend functionality, the way it is possible in @mixins. Also, inheritance is used in places where we want to share only the properties between selectors.

In conclusion, there are more features in CSS preprocessors, like @imports, loops, colour operations, etc..
All CSS Preprocessors possess more or less the same features. Which is the best-suited one can be decided upon the type of project and code-familiarity of the team. Have you used any of the above-mentioned features? Would like to hear your experiences/suggestions of CSS Preprocessors and their functionalities.

Learn Visual Artificial Intelligence Implementation in Existing Automation Framework. Click on link