Installing and using LESS.(PART- 2)

Here we are about to understand the installation of the LESS. This lesson also includes the details about the different features of LESS. These all the details are divided into 3 different parts.

Now, In a moment we are about to start with part-2

Operations

This is about what you would expect: using fixed numbers or variables to perform mathematical operations in your styles.

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;


For the record, I am aware that I could have also divided by four to get the @quarter_page variable, but I wanted to illustrate that the parentheses rule from the “order of operations” also applies. Parentheses are also required if you’re going to perform operations within compound properties; for example,

border: (@width / 2) solid #000.
Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units. Sass can work with unrecognized units of measurement and print them out. This feature was apparently introduced in an attempt to future-proof the library against changes made by the W3C.

/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error


Color Functions

Suppose you use a standard blue throughout your styles, and you want to use this color for a gradated “Submit” button in a form. You may be using photoshop or any other tool to find the lighter or darker shades of you theme.but  you can also use the color function in LESS.

@blue: #369;

.submit {
padding: 5px 10px;
border: 1px solid @blue;
background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

The lighten function literally lightens the color by a percentage value. In this case, it will lighten the base blue by 10%. This method enables us to change the color of gradated elements and any other elements with that color simply by changing the base color itself. This will be immensely helpful in themes. Plus, if you used a parametric function, like the ones listed above, you could alleviate some of that browser-prefix tedium with something as simple as


.linear-gradient(lighten(@blue), @blue, 100%);.


Either way, you get an effect that’s rather nice:

Namespaces

As many of you are fammilier with the purpose of Namespaces, this adds up another level organization in you CSS.Grouping the commnly used style and then pick from them. For instance, We have have created a group of styles called defaults, we could pull from this group when we come across an element that needs it.

#defaults {
.nav_list () {
list-style: none;
margin: 0; padding: 0;
}
.button () { … }
.quote () { … }
}

Later, in our code, if we come across a ul element within a nav element, we would know that we’ll need our default style. So, we can simply call it, and it will be applied.

nav ul {
#defaults > .nav_list;
}


String Interpolation

String values can also be used in variables and called within styles via @{name}.
@base_url = 'https://www.sns26.blogspot.in.com';
background-image: url("@{base_url}/images/background.png");

Some more feature details are packed in other part please use the link down below.

If you want to go further links of the other two parts are
Installing and using LESS.(PART- 1)
Installing and using LESS.(PART- 3)

Other links related to LESS are here
Introduction
Difference between LESS and CSS

If you like this  please share and like the blog  and subscribe to the blog also.