An Intro to CSS LESS Preprocessor

What is LESS?

LESS is a CSS preprocessor. It can solve common code problems, such as code repetition. LESS is cross-browser friendly.

How do you use LESS?

There are two ways to use LESS.

• ou can create a LESS file and convert it on-demand using a Javascript file.http://lesscss.org
• There are also many third party tools that allow you to compile your files.

Third Party Tool

Prepros

Variables

Variables in LESS work exactly like they do in PHP or most other programming languages. You can use them to store a value and then use the variable instead of the value itself, whenever you need it.

• Start with @ symbol

E.g.:

@header-font: Georgia;

h1, h2, h3, h4 { font-family: @header-font; }

.large {font-family:@header-font;}

In the example above, we defined the @header-font variable and assigned the value "Georgia" to it. We can now use this variable whenever we want to use the Georgia font. If we decide we'd rather go with Trebuchet MS as our heading font, we don't need to change the value through our whole file; we just change the value of the variable.

@import rule

You can also include an @import rule in a style sheet:

@import url("Variable.less");

@import rules must always be first in a document

Nesting

One of the things common in CSS is long selectors, which we often have to write to style child elements such as:

Mixins

Mixins allow the embedding of all the properties of a class into another class by including the class name as one of its properties, thus behaving as a sort of constant or variable.

CSS e.g.:

.border_top_bottom { border-top: dotted 1px #000; border-bottom: solid 2px #000; } In the above code, we have defined top and border styles inside a .border_top_bottom class. Now, whenever we want to add this styling to other elements, we can reuse them like:

#header

{ color: #000000;

.border_top_bottom;

}

.content a

{ color: #000000;

.border_top_bottom;

}

&combinator:

• Nested selector is concatenated with the parent selector when using &combinator
• This is very useful for Pseudo classes, such as :focus and :hover

Operations

• Any size or color variable can be operated upon.
• Simple Mathematical operators: +, -, *, / .

Final thoughts

There are many CSS preprocessors available, and I have shared my personal thoughts on LESS, which I hope might help beginners.

References

• http://lesscss.org/
• http://lessframework.com/