LESS (stylesheet language)

From Bauman National Library
This page was last modified on 21 May 2016, at 22:18.
LESS
LESS Logo.svg.png
Designed by Alexis Sellier
Developer Alexis Sellier, Dmitry Fadeyev
First appeared 2009
Stable release 2.5.1 / 25.09 2015
Typing discipline dynamic
OS Cross-platform
License Apache License 2
Website http://lesscss.org/
Influenced by
CSS, Sass
Influenced
Sass, Less Fraemwork

LESS — is dynamic language of styles which developed Alexis Sellier. It is created under the influence of language of Sass styles, and, in turn, had an impact on its new syntax of "SCSS" in which the syntax which is the CSS expansion is also used.

LESS — is a product with an open source code. Its first version was written on Ruby, however in the subsequent versions was decided to refuse use of this programming language in favor of JavaScript. Less — is the enclosed meta language: valid CSS will be the valid less-program with similar semantics.

LESS provides the following CSS expansions: variables, the enclosed blocks, miksina, operators and functions.

LESS can work at the party of the client (Internet Explorer 6+, WebKit, Firefox) or at the party of the server under control of Node.js or Rhino.

How to use LESS

There are two ways of use of LESS. You can create the LESS file and convert it by means of Javascript or compile it in advance and use the resulting CSS file.

We use LESS and Javascript the file

For a start it is necessary to download the file with official LESS Javascript and to tie him to a page as any other js a script.

<script src="less.js" type="text/javascript">

Then to create the file with the .less expansion and to tie him by means of such code:

<link rel="stylesheet/less" type="text/css" href="style.less">

Make sure that the LESS file is attached before JS. Now the LESS file will work also as well as usual CSS.

Compile the LESS file

Though this way is a little more tiresome, but sometimes it is more preferable. Not to convert a code at each loading of the page it is possible to use the resultant CSS file. Converters: for Windows – Winless and LESS.app for Mack.

Subdue power of LESS

We will consider a LESS code. It is very easy to read and understand it as LESS provides expansions for CSS: variables, the enclosed blocks, impurity (mixins), operators and functions.

Variables

Variables in LESS work just as in PHP, JS and in the majority of other programming languages. You can use them for value storage, and then use variables instead of the value every time when it is necessary for you.

@header-font: Georgia;

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

The @header-font variable appears in an example higher and Georgia value registers there. Now it is possible to use this variable always when it is necessary to establish the Georgia font. If it is necessary to change a font, simply it is necessary to change value of a variable.

With LESS we can modify and at the same time document our working process.

/* Colors for my Website */
@color-orange: #ff9900;
@color-gray_light: #cccccc;
@color-black_dark: #333333;
@color-black_medium: #454545;

body {
  background: @color-black_dark;
  color: @color-black_medium;
}
a {
  color:@color-orange;
}
h1, h2, h3, h4, h5, h6 {
  color: @color-black_dark;
}

Area of visibility of variables

The area of visibility of variables describes places where they are available. If you define a variable at the very beginning of the LESS file, it will be available to any code written after.

It is also possible to define a variable in rule CSS. In this case variables won't be available out of this rule, they can be used locally.

a {
  @color: #ff9900;
  color:@color<nowiki>;</nowiki>
}
button {
  background: @color;
}

In this example of LESS it won't be converted because of a mistake, @color isn't defined for use in the button element. If the variable is declared out of an element and in other element, it will be available only locally.

@color: #222222;

a {
  @color: #ffffff;
  color:@color;
}
button {
  background: @color;
}

Here the link will be painted in white, and the button will have a black background.

Variables in variables

If you wrote for PHP, you know that it is possible to declare a variable name in other variable.

@color-chirstmas_red: #941f1f;
@name-of-color: "color-chirstmas_red";
@color: @name-of-color;

Enclosure

During writing of CSS cascade style is used. To change fields at the paragraph only in article it is possible to use the following code:

article.post p{
  margin: 0 0 12px 0;
}

There is nothing bad in such approach but if we have to change also style of links, quotes, headings, etc. only in article, it will be necessary to use a prefix of "article.post" for each element. It does writing of a code more boring and complicates its reading.

It is possible to enclose these rules that will give shorter and logical version of styles in LESS. For example:

article.post {
  p{
    margin: 0 0 12px 0;
  }
  a {
    color: red;
  }
  a:hover {
    color: blue;
  }
  img {
    float:left;
  }
}

Spaces aren't obligatory, but they do a code to more readable. Levels of an enclosure aren't limited.

a {
  color:red;
}
p {
  margin:0px;
}
article {
  a {
    color: green;
  }
  p {
    color: #555
    a {
        color:blue;
    }
  }
}

Mixins

Mixins in LESS will relieve of a set of an excessive code. An example of creation of the rounded-off frame in which only the top corners are rounded:

.tab {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

And so every time …. About all this LESS it is possible to change, having created mixin. Mixins – elements of reusable use which can be added to any element as a rule. And it isn't even necessary to study new syntax.

.rounded_top {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.tab {
  background: #333;
  color: #fff;
  .rounded_top;
}
.submit {
  .rounded_top;
}

In the above-stated code we define the .rounded_top element for rounding of the top corners. When we add it to any other element as mixin (you watch .tab), we in essence import rules which created for it. Thanks to such syntax we can use any element as impurity.

.rounded_top {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.tab {
  background: #333;
  color: #fff;
  .rounded_top;
}
.submit {
  .tab;
  background: red;
}

Styles at the .submit element — it is the rounded corners above, white color and a red background (background is redefined).

Mixins with parameters

Mixins with parameters, sounds difficult, they solve a problem very easy way. In examples you are higher saw as it is possible to define an element with a radius in 6px on the top corners. If it wants to create an element with a radius in 3px? It is necessary to declare the different impurities for all pixel values? Of course the answer isn't present, it is necessary to use mixins with parameters! They are similar to functions because by their call it is possible to change values. We will copy an example to border-radius to look as it works.

.rounded_top(@radius) {
  -webkit-border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-topright: @radius;
  border-top-left-radius: @radius;
  border-top-right-radius: @radius;
}
.tab {
  background: #333;
  color: #fff;
  .rounded_top(6px);
}
.submit {
  .rounded_top(3px);
}

Radius at .tab is equal in the above-stated code 6px, and .submit an element will receive value 3px.

Standard values

If identical border-radius is usually used, but another is sometimes necessary, it is necessary to set impurity standard value.

.rounded_top(@radius:6px) {
  -webkit-border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-topright: @radius;
  border-top-left-radius: @radius;
  border-top-right-radius: @radius;
}
.tab {
  background: #333;
  color: #fff;
  .rounded_top;
}
.submit {
  .rounded_top(3px);
}

In this example of .tab will receive standard value in 6px, and .submit – 3px.

Multiple parameters

You can also use multiple parameters to define more difficult impurity.

.radius(@radius:6px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.button(@radius:3px, @background: #e7ba64, @padding: 4px) {
  .radius(@radius);
  background:@background;
  border: 1px solid @background - #222;
  padding: @padding;
}
.read_more {
  .button(0px);
}

In this example the class .read_more is formatted with a space 4px, background color #e7ba64 and with border-radius equal 0px.

Use of all arguments for one time

One more option when using arguments this their association. The reduced properties in CSS have the multiple values which are written down one behind another.

div {
  border:1px solid #bbb;
}

To set to all necessary elements gray border, it is possible to use such function:

.gray_border(@width: 1px, @type: solid, @color: #bbb){
  border:@arguments;
}
div {
  .gray_border(2px, dashed);
}

@arguments this special keyword which removes all parameters one by one in the set order. Result of the above-stated LESS code will be:

div {
  border:2px dashed #bbb;
}

Functions and operations.

It is possible to operate with values or variables: adding them, subtracting or multiplying. In what cases it can be useful? For example, when using of the left fixed menu.

@leftMenuWidth: 100px;

.leftMenu {
  width: @leftMenuWidth;
  height: 100%;
  position: fixed;
}
.content {
  margin-left: @leftMenuWidth + 20;
}

Thus, the space at the block with the class "content" will be equal "menu width + 20px".

More popular example is operations with color. In certain cases can it is required to make color of a background or the text more dark or is lighter (for example, when targeting). It can achieve by addition or subtraction of colors:

@exampleColor: #9b59b6;

.example {
  // increase the value HEX 1
  // obtain a lighter shade
  color: @exampleColor + #111;
  &amp;:hover {
    // decrease the value HEX 1
    // obtain darker shade
    color: @exampleColor - #111;
  }
}

Or with use built-in in LESS functions:

@exampleColor: #9b59b6;

.example {
  // lighten the color by 10%
  color: lighten(@exampleColor, 10%);
  &amp;:hover {
    // darken the color by 10%
    color: darken(@exampleColor, 20%);
  }
}

For colors there are also functions saturate, desaturate, spin, etc. It is possible to study the complete list of functions and methods of application on official site LESS.

Line interpolation

Line interpolation is another fancy word that means that this arbitrary string can be stored in a variable, and then used in the value of the property.

@url: "http://mycompany.com/assets/";
background-image: url("@{url}/sprite.png");

It can be useful at creation of the centralized framework.

Shielding

Sometimes it is necessary to use properties or values which aren't valid CSS (the rule for IE).

If you want to create a gradient in IE, you have to make something like it:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');

This CSS isn't valid therefore LESS won't be compiled. In this case you can shield this value that will allow LESS to pass it.

.button {
  background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));
  background: -moz-linear-gradient(top, #666666, @color - #444444);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444')";
}

All that it is necessary to make, it to quote section and to put a tilde before it. This section won't pass through the LESS processor and won't be thrown out.

Import

As well as in usual CSS it is possible to import files. LESS allows to import CSS and LESS using the following syntax:

@import "reset.min.css";
@import "framework.less";
@import "widgets";

The first import is rather obvious. He imports the rule CSS determined in reset.min.css without processing by their LESS parser.

The second import will insert the maintenance of framework.less and will process it as any other LESS of the rule.

The third import works also as well as the second. If expansion isn't established, the preprocessor considers it the LESS file.

Comments

Naturally, multi-line comments are available in LESS in the same look, as well as in CSS. Also LESS allows use of one-line comments as in PHP or Javascript, by means of a double return slash.

/*
  This is my main LESS file.
  It governs how most of the site looks.
*/
body {
  padding:0px; // This resets the body padding
}

Reference