LESS a Dynamic CSS

This article is all about a cousin brother of CSS that is more effective and friendly in comparison to CSS. Want to know how? Why? And many other factors? Join me in this journey and let me explain all these facts to you.

Outlines

• Overview
• Introduction
• How to Use
  
  
  • Methodology: 1
  • Methodology: 2
    
    
• Structure
• Fundamentals
  
  
  • Variable
  • Mixins
    
    
    • Mixins
    • Parametric Mixins
      
      
  • Operations
    
  • Color Functions
    
  • Nested Rule
    
    
• Key Points
  
• Summary

Overview

This article explains that CSS is not the single design language in the world of web development. There are others that exists in that world too, but unfortunately our development world is not familiar with those other styling languages that are comparatively better, easier and more effective than CSS.

In this entire article I'll try to explain LESS from the very scratch to tip by including all these second thoughts that have begun developing in your mind:

• What is LESS?
• Why to use LESS?
• How it's better than CSS?
• How to use LESS?
• Where you can use LESS?
  and so on.

So buckle up guys, because this journey is fun…

Basic | LESS

So I hope you all will be familiar with Cascading Style Sheets (CSS). Relax, just kidding guys. Well now I am starting this introduction with a series of questions, so be ready to answer them. I guess all of you will easily answer all these questions, here we go.

What is CSS?

Yes, the answer in your mind is correct. In simple words it's a styling language used for generally design purposes.

Where we do use CSS?

Yes, again the answer in your mind is correct, most commonly with HTML pages (doesn't matter whether static or dynamic).

In how many ways we can use CSS?

Great, you are again right. We can use CSS internally, in a separate external file and inline too depending on your requirements.

Now for my final question.

How many styling languages do you know?

??



This question is kind of weired but it's true. Most commonly we can see developers are only familiar with 1 or 2 styling language but more than that you will hardly see. But there are many other styling languages that exist too that are better than CSS, easy and flexible too.

But we are not familiar with these extra and more advantageous styling languages. One of them are "LESS". So this article is all about LESS.

Introduction

LESS is nothing but a dynamic style sheet, that comes into the light for making web designers work more easily and conveniently. You can find its official definition as:

It is a dynamic style sheet language.

Which is purely true and why I am saying that you will find that later in this article. One more thing is that you don't need to learn something new or invest your very precious time in learning LESS if you are familiar with CSS. It uses the same base functionality of CSS and it's fundamental but in a more dynamic way.



So you can call LESS is "Dynamic CSS" too.

How to Use

This is the most important and common question that comes into our mind when going through new technologies. So the answer to this question is very simple, as I said in the receding that it's just a dynamic CSS so it requires only a simple text editor to write its respective snippet.

Now I will share methods or I better say approaches of using LESS in your code or development work. Here they are.

Methodology: 1

"Compiling in the Browser with LESS.JS", this is the first method of using LESS functionality in your application.

Now you must be thinking what that new term is in that entire scenario and how it's going to help you in using LESS. This new term is "LESS.JS". Now let's see what LESS will do for us in the entire scenario.

LESS.JS is nothing but a JavaScript library (you can easily download it). LESS.JS will use AJAX requests to grab your LESS files then process all the LESS files to convert them into CSS and finally it will automatically inject the Style sheet into your head tag.

Methodology: 2

"LESS & Command Line", this is the second method of applying LESS into your document.

In order to use this method you need to install node.js (you can download it from its official website depending on your OS) first in your system and after that you can install the LESS module by simply running the following command in a command prompt:



After installing the LESS module, run the following command to convert style.less files into styles.css, for this:



Structure

There is no change in it's structure. It's simply similar to the structure of CSS. As I already said in the preceding paragraph you can use LESS in all the following three ways like CSS:

• InLine
• Internally
• Externally

Here in a demo structure I am showing you an external type functionality.

• HTML Structure
  

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>LESS | Demo</title>
      <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
  </head>
  
  <body>
  <div>
  <span class="Square" id="S1"></span>
  <span class="Square" id="S2"></span>
  <span class="Square" id="S3"></span>
  </div>
  </body>
  
  </html>

• CSS Structure
  

  body
  {
  }
  
  .Square
  {
        display: inline-block;
        margin: 25px;
        height: 200px;
        width: 200px;
        padding: 1px;
        background: #6e6e6e;
  }

• Output
  
  

Now in the fundamental section I'll explain some cool operations that can help you make this pattern design come alive and cool without any extra effort.

Fundamentals

In this section, I'll try to explain the LESS fundamentals, these are not all the fundamentals but is the basics that are very important if you are interested in LESS.

So let's explore them.

• Variable
  
  In LESS, variables are declared using the @ symbol. You just need to provide two attributes after this symbol:
  

  - Name (Color)
  - Value (#6e6e6e)
  @Color: #6e6e6e;

  Demo Snippet
  

  .Square
  {
        display: inline-block;
        margin: 25px;
        height: 200px;
        width: 200px;
        padding: 1px;
        background: @Color;
  }

  Using this method now you can make any number of changes in your application without changing the color script tag again and again. Through LESS you must only change the place of the default declaration and bang, you will see the magic.
   
• Mixins
  
  LESS provides some extended functionality such as drawing shapes, diagrams, defining border margins and so on that was not possible with even CSS3. This extended functionality is provided by several add-ons or prefixes in LESS, these are: -webkit-, -moz-, -fa- and so on.
  
  So our functionality goes something like this:
  

  #S1
  {
        -moz-border-radius: 550px;
        -webkit-border-radius:550px;
        border-radius: 550px;
  }

  (It will turn the first shape into a circle.)
  Mixins are also of 2 types, based on the parameters:
  
  
  
  
• Operations
  
  In order to use mathematical operations in your web application you are always welcome to use LESS in your application. LESS provides you this freedom.
  
  You can use mathematical operators in your style sheet by simply declaring a variable. I'll show you how easily you can do that.
  

  Here's a demo snippet:
  @SquareWidth: 100px;
  @Border: @SquareWidth * 0.1;

  (This will add some border to the shapes.)
  
  You can use these types of operations for your web pages simply using LESS functionality without any headache.
  
  
• Color Functions
  
  Are you guessing about this functionality, such as what it's going to create for you, or it's functionality by its name? If yes then let's see how close you were.
  
  LESS provides certain sets of color functions that can be used in web applications to make them more effective and dynamic. These color functions are as follows:
  
  
  
  So are you ready to mingle with these functions?
  
  Let's explore them.
  
  Darken() and Lighten()
  
  These functions help in adding some black and white effects in your text, picture, shape and so on, respectively.
  
  Saturate() and Desaturate()
  
  These functions help in making your text, picture, shape and so on more colorful or taking them more near to a gray scale respectively.
  
  fadeIn() and FadeOut()
  
  These functions are used for increasing or decreasing transparency in your web application.
  
  Spin()
  
  It is used for modifying the hue of the color, used in your application.
  
  
• Nested Rule
  
  Now imagine a scenario in which you are designing a complex page using CSS. In which you are using many chain selectors in order to reach the desired page view.
  
  Something like this:
  

  #header
  /* Main #header Style*/
  {
     h1
     {
        /* #header h1 Style */
     }
     .
     .
     .
     {
         .
         .
         .
     }
  
  }

  Now does this seem more cool and artistic? If yes then the choice is yours and if no then let's create a world of possibilities with LESS nested rules.

Key Points

• Makes styling easier
• Easy to handle
• It's nothing but a CSS Preprocessor
• Can be called “Dynamic CSS" too
• You can use any of the methods to use it's functionality in your web page.
• Works more effectively than CSS
• Decreases nesting complexities
• You can use mathematical operators in it
• MIXins for advanced functionality
• Color Functions, for making your page much more adaptive and stylish

There are many more key points. If you find another then let me know and I'll try to update them in this article or in the next part.

Summary

I hope you enjoyed this article and have learned something new and interesting, that is not necessary to learn but if you become familiar with it, no doubt it will provide you advantages.

I'll add more demos and a working snippet in more detail in the next part of this article, until then stay tuned and keep coding.