19Nov2015

Application Development: LESS as more robust CSS3 development

Nowadays, nobody code raw CSS3 in real-world HTML5 Applications Development. Huge amount of monotonic repeated code is too hard to create and support. Usually, one of CSS preprocessors are used to implement CSS3 styles in more elegant way. LESS [http://lesscss.org/] is one of such approaches. It doesn’t need to spend a lot of time to start using it. Try online tool [http://lesscss.org/less-preview] to process LESS into CSS code.

 Really less

First of all, LESS is pre-processor of special syntax into CSS code. Besides, CSS code is a correct LESS code as well. You can start porting your existing pure CCS3 project into LESS just by a copy-paste action. When we mark some section or module with specified CSS class we are going to format and style not just wrapper but all its inside components as well. LESS helps us in this most used case by its nested syntax. E.g., LESS code:

   .box {

     border-color: white;

     div {

       color: red;

     }

   }

 

would be processed into CSS:

 

   .box {

     border-color: white;

   }

   .box div {

       color: red;

   }

It’s ok to use both the rules and the directives (media) nested each other.

 

Features

There are some features that make LESS so powerful Web Application Development technique. If there is any value common for several sections or may be used in several places, you can hold it in a variable. In this case there is single place to change the value. E.g.,

@nice-blue: #5B83AD;

@light-blue: @nice-blue + #111;

 

#header {

color: @light-blue;

}

There is a mixin approach. It allows to to use the same subset of properties in other rules. 4 basic arithmetic operations may be applied in the expressions with numbers, colors and variables. Mixins may be defined and used with parameters like functions. Besides, there are a lot of standard LESS functions for manipulations with numbers, strings and colors. Mixins and variables are in the scopes of the rules they are defined. Detached rulesets may be used as part of another rule but not like a class in result CSS code. There is importing LESS or CSS code from external file. E.g.,

@import “library”;

 Bootstrap and tools

LESS is very popular because it’s used by Bootstrap framework well-known in Web Application Development. Sources of its style sheets (both the core and modules) are presented in LESS originally. That means we have to modify LESS code and use LESS pre-processor for Bootstrap customization. LESS pre-processor may be integrated into whole build process of grunt or gulp project. These are most popular build systems of JavaScript projects. Watchers are tools are useful during development process. Such daemon is observing a file or a folder subtree of source LESS files and if there was any changes there, the watcher would run pre-processor to update compiled CSS files appropriately. LESS may be installed via npm and used from the command line or in the JavaScript code as node.js module.

Read also

Comments are closed.