LESS Introduction | Dynamic CSS styling

|
| By Webner

LESS is an open source CSS pre-processor designed by Alexis Sellier in 2009. It is not exactly CSS but acts like one with the help of Javascript libraries that interpret the stylesheet and make it readable for browsers. The very first benefit of using LESS is that LESS is dynamic in nature as compared to traditional CSS, making life of web developers less complicated when they design websites as it cuts down repetition. In this article, we will list some basic features of LESS, how powerful it is and how it can be useful for programmers. The syntaxes for both CSS and LESS are almost same. Instead of saving file with .css (CSS), save it with .less extension.

Primary features that LESS offers are:

1. Variables

2. Mixins

3. Mathematical Operators

4. Nested Rules

5. Functions

6. Importing

7. Namespaces

Variables:

In CSS, if we want to add style on the web page such as color, margin, border, font size, padding etc, we have to give values to these entities every time they are used. The problem arises when there is need to update the values one by one. This is time-consuming and efficiency is also compromised. In LESS, this problem is reduced as you can declare variables instead.

For example, browsers can only read colors in hex values (other than standard colors). It is difficult to remember hex values of colors in CSS especially if a website uses a lot of colors. With LESS, just create a new variable and include the hex value of the color. Let’s say you want to have light blue color with hex value = #add8e6 and dark green color with hex value = #004600.

Declaring variables for these colors in LESS:

@dark_green: #004600;
@light_blue: #add8e6;

Now you don’t have to apply confusing hex values instead use declared variables. If you want to change the color, just change the hex value of variables and changes will be made automatically to other places on a website where that variable is used.

Calling color in CSS:

Color : #004600;
Color : #add8e6;
Calling color in LESS
Color : @dark_green;
Color : @light_blue;

Mixins:

LESS allows developers to create classes within classes. This is very beneficial as developers need not to repeat same properties over and over again. Just create a class and include properties of another class just by including the class name. Mixins also allow developers to add properties in addition to those inherited.

A typical mixin may include:

Class + Class = Mixin
Class + some properties = Mixin.
Let’s take an example :

<button type="button" onclick="alert('Hello Sachin')">Button 1</button>
<button  type="button">Click Me!</button>

Let’s apply color, background color and font size to the above buttons in LESS.

.btn1{ //Declare a class.
Color:white; //Color of text written inside button
     } //End of class
.btn{
    .btn1; //include already created class name.
   background-color:@dark_green ; //add own properties ; We used already declared color variable as background color  
     }

Include these classes in your HTML as

<button class=”btn1″type=”button”onclick=”alert(‘HelloSachin’)”>Click1</button>
<button class=”btn” type=”button”>Click Me!</button>

Mathematical Operators:

LESS gives developers the ability to use mathematical operations such as addition, subtraction, multiplication and division. This feature help web developers in maintaining uniformity in their code.

Let’s take an example:

Declare a variable for font-size:

@font-size=12px
.btn1 
{
font-size:@font-size;
color:@red;
background-color:@new_color ;
}
.btn {
   .btn1;
   font-size:@font-size*4;
   background-color:@dark_green ;
    }

In the above example, font size of ”btn1” is 12px and font size of “btn” is 4 times the size of variable font-size. When you make changes in font-size variable, font size of “btn” is automatically adjusted.

Let’s take another example:

Declare a variable @red: #FF0000;
You can use + or – operator to darken or lighten the color or add/subtract different hex values to generate color variations.
If you want to use light red or dark red color, you can do this in the following way.
@light_red: @red + #333;
@dark_red: @red – #666;
It’s all about trying new combinations to have different shades of a same color.

Nesting Rules:

Nesting allows web developers to develop stylesheets in an ordered way as it cuts down the length of code and thus is easier to understand the code as compared to CSS. It follows the same rules and concepts as followed by programming languages.

Code in CSS:

webners h1 
{
color: @red;
}

webners p1
{
color: @dark_red;
}

webners p2
{
color: @light_red;
}

Same code written in LESS will look like:

.webners
 {
  .h1 
   {
    color: @red;
   
   .p1
   {
    color: @dark_red;
   }
   .p2
   {
    color: @light_red;
   }
 }

Functions:

One of the most interesting feature which LESS has come up is the ability to use functions which is not directly available in CSS. LESS provides various functions which can be applied in stylesheets.

These functions are grouped into nine categories:

String Functions:

% Format
Replace
Escape
e

List Functions:

Length

Extract

Math Functions:

Min

Max

Pi

Sqrt

Round

Type Functions:

Isnumber

Isstring

Iskeyword

ispixel

Color Definition Functions:

Hsla

Hsv

rgb

Color Channel Functions:

Hue

Saturation

Lightness

luminance

Color Operation Functions:

Saturate

Desaturate

Darken

fadein

Color Blending Functions:

Multiply

Screen

overlay

Softlight

hardlight

Misc Functions:

Color

Image size

Image height

Convert

data-uri

To know more about functions in-depth visit  Click here

Importing:

LESS allows you to import other LESS files to the current LESS file. This is very beneficial as all the variables, mixins, classes from other LESS files are imported which makes coding fun for web developers. They can create a custom LESS file dedicated only for mostly used color variables, classes, mixins etc. This helps in completing web designing project in less time, keeping overall look of the code neat and tidy.

Syntax for importing other LESS files to current LESS:

@import “filename”

Namespaces:

Mixins + Classes = Namespaces

Mixins + Mixins = Namespaces

Mixins + Some additional properties = Namespaces

Namespaces help in binding up properties and groups mixins into a single bundle.

For Example:

Create four classes:

.class1
{
color: @red;
}

.class2
{
background-color:@dark_green;
}

.class3
{
 text-align: center;
}

.class4
{
class3;
}

Create two mixins:

Mixin 1

.mix1
{
.class1;

.class2;
}

Mixin 2

.mix2
{
 text-align: center;
}
.class4
{
.class3;
}

Create a namespace:

.namespace  //choose any name
{
.mix1;
.mix2;
}

In this article, we briefly touched upon some possibilities that LESS has provided to web developers. Any web developer who desires to take his/her designing skills to a whole new level should start using LESS for styling their web pages.

Leave a Reply

Your email address will not be published. Required fields are marked *