LESS (stylesheet language)

LESS is a style sheet language that was designed to make writing stylesheets more effectively. The main objectives are to enable intelligent control and to avoid code duplication. LESS is a superset of the style sheet language CSS, that is, any valid CSS style statement is also a valid LESS statement. LESS is compiled into pure CSS.

History

The language was (also known as Cloud Head ) developed by Alexis Sellier and published in 2010.

Properties

In addition to the normal CSS provides instructions LESS nesting rules, which code duplication can be avoided. For example, one ( existing or programmer- defined ) class of elements of rules are applied.

Furthermore LESS provides variables such as the constants in Java centrally determined and can be then used in several places. A function of these variables, and branching calculations can be performed. In addition, LESS mixins support: so rules can be grouped under one name and inserted with this in several places, so as to effectively possible to avoid code duplication.

Compilation

Since LESS is written in Javascript, it can be not only on the server, but also client side compiled ( in the browser). One advantage of the client-side compilation for developers is that changes to the source code using the Watch mode automatically be updated in the web browser. This can save time in development.

Code Examples

Variables

With variables, it is possible values ​​often used (eg colors) for use in multiple places and use their modifications (eg, lighter / darker, paler ( walk-in ), shot in color angle ) intelligent.

@ my color: # 143352;   # header {    background-color: @ my color; } h2 {    color: @ my color; } If the whole is now compiled, we get the following result:

# header {    background-color: # 143352; } h2 {    color: # 143352; } mixins

In mixins multiple properties can be defined, which then - similar variables - can be used. We can pass parameters.

. around ( @ radius: 4px ) {       -moz- border-radius: @ radius;    -webkit- border-radius: @ radius;         -o- border-radius: @ radius;            border-radius: @ radius; } # header {   . around; } # footer {   . around ( 21px ); } Compiled it looks like this:

# header {       -moz- border-radius: 4px;    -webkit- border-radius: 4px;         -o- border-radius: 4px;            border-radius: 4px; } # footer {       -moz- border-radius: 21px;    -webkit- border-radius: 21px;         -o- border-radius: 21px;            border-radius: 21px; } nesting

Hereby, it is possible to nest into each other selectors. Thus you have to type as much and also reduces the risk of errors:

# header {    h1 {      font-size: 26px;      font-weight: bold;    }    p { font- size: 12px;      a { text-decoration: none;        &: hover {border -width: 1px }      }    } } This will be compiled to

# header h1 {    font-size: 26px;    font-weight: bold; } # header p {    font- size: 12px; } # header a { p    text-decoration: none; } # header p a: hover {    border-width: 1px; } see also

• Stylus ( stylesheet language )
• Bootstrap ( Framework)