LESS

LESS is a dynamic style language developed by Alexis Sellier. It was created under the influence of the Sass style language, and, in turn, influenced its new syntax “SCSS”, which also uses the syntax, which is an extension of CSS ^[1] .

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

LESS provides the following CSS extensions: variables, nested blocks, mixins, operators, and functions ^[2] .

LESS can work on the client side (Internet Explorer 6+, WebKit, Firefox) or on the server side running Node.js or Rhino ^[2] .

Variables

Less allows you to use variables. The variable name is preceded by the @ character. The assignment character is a colon (:).

During translation, the value of the variable is inserted into the resulting CSS document ^[2] .

  @color: # 4D926F;
 
 #header {
   color: @color;
 }
 h2 {
   color: @color;
 }

This LESS code will be compiled into the following CSS file:

  #header {
   color: # 4D926F;
 }
 h2 {
   color: # 4D926F;
 }

Impurities

Impurities allow you to include a whole set of properties from one set of rules to another by including the name of a class as one of the properties of another class. This behavior can be viewed as a kind of constant or variable. They can also behave like functions, taking arguments. In pure CSS, repeating code should be repeated in several places — impurities make the code cleaner, clearer, and easier to change ^[2] .

  .rounded-corners (@radius: 5px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
    border-radius: @radius;
 }
 
 #header {
   .rounded-corners;
 }
 #footer {
   .rounded-corners (10px);
 }

This LESS code will be compiled into the following CSS file:

  #header {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    border-radius: 5px;
 }
 #footer {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    border-radius: 10px;
 }

Nested rules

LESS makes it possible to nest definitions, instead of either along with cascading. Suppose, for example, we have this CSS: CSS supports logical cascading, but one block of code in another cannot be nested. Less allows you to nest one selector into another. This makes inheritance more clear and shortens the style sheets ^[2] .

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

This LESS code will be compiled into the following CSS file:

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

Functions and operations

Less allows you to use operations and functions. Through operations, you can add, subtract, divide, and multiply property values ​​and colors, which you can use to create complex relationships between properties. One-to-one functions are mapped to JavaScript code, allowing you to process values.

  @ the-border: 1px;
 @ base-color: # 111;
 @red: # 842210;
 
 #header {
   color: @ base-color * 3;
   border-left: @ the-border;
   border-right: @ the-border * 2;
 }
 #footer { 
   color: @ base-color + # 003300;
   border-color: desaturate (@red, 10%);
 }

This LESS code will be compiled into the following CSS file:

  #header {
   color: # 333;
   border-left: 1px;
   border-right: 2px;
 }
 #footer { 
   color: # 114411;
   border-color: # 7d2717;
 }

Comparison with other CSS preprocessors

Both Sass and LESS are CSS preprocessors that allow writing clear CSS using software constructs instead of static rules ^[3] .

LESS inspired by Sass ^[4] . Sass was designed to both simplify and extend CSS; in the first versions, curly braces were excluded from the syntax (this syntax is called sass ). LESS is designed to be as close as possible to CSS, so they have the same syntax. As a result, existing CSS can be used as LESS code. Newer versions of Sass also include a CSS-like syntax called SCSS (Sassy CSS) ^[1] .

For a detailed syntax comparison, see Sass / Less Comparison ^[5] .

ZUSS (ZK User-interface Style Sheet) ^[6] is a style language based on LESS ideas. It has a similar syntax, except that it is intended for use on the server side with the Java programming language. It does not use the JavaScript interpreter (Rhino), but allows you to directly invoke Java methods.

Using

LESS can be used on the site in various ways. One option is to connect the less.js JavaScript file to the web page to convert the code to CSS on the fly using browser tools.

This is done, for example, using the following html-code:

  <link rel = "stylesheet / less" type = "text / css" href = "styles.less">
 <script src = "less.js" type = "text / javascript"> </ script>

If you are using server-side JavaScript: Rhino or node.js, you can convert .less files to server-side .css.

Finally, there are third-party implementations of the language: for example, the SimpLESS open source compiler for Windows, Linux and Mac OS X ^[7] , .less {} is an implementation for the .NET framework ^[8] or lessphp ^[9] , which allows compiling less-styles on the side server for PHP sites.