PU$]-[KAR's

… Every drop has ability to survive .


Leave a comment

DOT LESS … What & Why ?

Hello,

Today we will be discussing few simpler points about ‘LESS’ programming i.e. one of the preprocessor for writing ‘CSS’. So to begin with …

What is DOT LESS?

Less is the preprocessor of Css and every one is well familiar with Css. It means that ‘Less’ is a style sheet which is generated dynamically and it can be compiled into Css.

Why LESS?

Now one can fairly argue that why we would add an extra layer before Css because everything is going to be converted into Css only. Then why anyone would put an extra burden?
And the answer lies in the extra features that have provided by the Less to write Css in more simpler manner and in more organized way. So First we will see the features of Less on by on and the finally we will come why you would consider Less instead of writing Css directly.

  • Adds ‘Right’ things at ‘Right’ place: We know Css is a dumb language. In Css we go on adding stuff but no variables, no functions, no reusability at all. Less empowers the Css by adding such features like variables, mixins, and functions.
  • Time Saving: You’ll be amazed at how much time you save when you aren’t forced to write the same things over and over.
  • Easier to maintain: Being able to use variables, mixins, and functions means you can define a value or group of values. This makes developer’s life easy. By declaring all this stuff at the beginning of your document, instead of through it, making it easier to make changes later.
  • Makes Css in more organized structure: Less supports nested hierarchy of controls.

To be going forward we are going to see these features in details.

Features of LESS

Now, here we will walk through few very important and widely used features of Less which helped to make developer’s life happier 🙂

  • Variables:Its pretty simple and straight forward thing. We can declare variables like constants and that can be reused across the files. e.g.
     @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    #header {
    color: @light-blue;
    }
  •  

  • Mixins:Mixins are kind of setting a behavior rule to the application. Bunch of properties are declared together and can be reused across the application to apply certain behavior to certain controls.
    E.g. While setting up the border to any div or panel we will definitely declare certain properties repetitively, so these properties are can be bound together to create a mixin.
     .bordered
    {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }
    #menu a
    {
    color: #111;
    .bordered;
    }
     
    Here, if you look at ‘menu a’ has consumed mixin ‘bordered’, so even other classes like panel, div can consume this same mixin to apply the border in same way.
    Even we can pass parameters/varibles to the mixins as well so that we can pass our own values inside the mixins.
  •  

  • Nested Rules:Less follows the hierarchy of the DOM elements to declare nested styles.
    If you go through the following structure of CSS you will understand the point.
     #header
    {
    color: black;
    }
    #header .navigation
    {
    font-size: 12px;
    }

     
    So this Css says that DOM ‘header’ also contains class ‘navigation’ inside it. It is a bit difficult and tedious to write in Css manner but Less can understand the structure and provides a simpler way to declare styles using DOM hierarchy shown as below.
     #header
    {
    color: black;
    .navigation
    {
    font-size: 12px;
    }
    }

     Now, if you could observe we have used hierarchy of inside less itself i.e. header -> navigation.
  •  

  • Use of operators: Any number, color or variable can be operated on. Here is an examples:
     
    @var: 5px + 2.
     
    Here we can observe that Less is smart enough to understand that ‘px’ is a unit so adding ‘2’ will result into ‘7px’. Finally ‘var’ will hold value as 7px.
  •  

  • Importing the files: Less provides the features of importing the variables and mixins from the different file. This helps developer to modularize the code in better manner. The import statement will follow the following syntax.
     
    @import “@{themes}/fileName.less”;
     
  •  

  • Functions: Less provides built-in Functions as well. Like percent, saturation (incase of color saturation) and many more. So developer need not to takecare of such small things and in fact these things are widely used in styling.

Apart form these Less also provides many more features like:

     

  • Lazy loading: In this case Variables are lazy loaded and do not have to be declared before being used.
  •  

  • Lazy loading: Less can perform looping. We ca write recursive mixins, iterations in less as well.

As we dig into Less more and more the list is getting bigger and bigger.

To summarize it…


My friends, at first glance using ‘Less’ will look like more tedious but form my personal experience I can say that just start using it & more you use will more you love it. 😉

Advertisements