Less (stylesheet language)

Less
Basic data
Publishing year:	2009
Designer:	Alexis Sellier
Developer:	Alexis Sellier, Dmitry Fadeyev
Current  version :	2.7.2   (January 4, 2017)
Typing :	Dynamic
Influenced by:	CSS , Sass
Affected:	Sass
Operating system :	cross-platform
License :	Apache license
lesscss.org

Less (English for less is) a style sheet language with the aim of writing CSS efficient. The main goals are to enable intelligent controls and to avoid code repetitions. Less is a superset of CSS, that is, a CSS code is also valid Less code at the same time. Less is compiled to CSS .

history

The language was developed by Alexis Sellier (also known as Cloudhead) and published in 2009. Initially, the Less compiler was developed in Ruby . Later it was decided to switch to JavaScript .

properties

In addition to the normal CSS instructions, Less offers the nesting of rules, whereby code repetition can be avoided. For example, rules can be assigned to a class of elements (existing or defined by the programmer).

Furthermore, Less offers variables such as B. the constants in Java can be set centrally and can then be used in several places. Depending on these variables, calculations and branches can also be carried out. Less also supports mixins : rules can be summarized under one name and inserted in several places with this, in order to avoid code repetitions as effectively as possible.

Compilation

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

Code samples

variables

With variables it is possible to use frequently used values ​​(e.g. colors) in several places, as well as to intelligently use their modifications (e.g. lighter / darker, paler (more earthy), rotated in the color angle).

@meineFarbe: #143352;

#header {
  background-color: @meineFarbe;
}
h2 {
  color: @meineFarbe;
}

If the whole thing is now compiled, you get the following result:

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

Mixins

Several properties can be defined in mixins, which are then used - similar to variables. In addition, parameters can be passed. This makes it easy to generate code that uses multiple manufacturer prefixes without having to specify them each time.

.rund (@radius: 4px) {
     -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
       -o-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .rund;
}
#footer {
  .rund(21px);
}

This is compiled to:

#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

This enables selectors to be nested within one another. Nesting can make the code shorter and clearer, which can reduce errors.

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

This is compiled to:

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

Operations and functions

In Less, arithmetic operators can be used to calculate values. Functions can be used to modify values ​​in more complex ways. This is helpful, for example, to change color values ​​(e.g. change saturation or brightness) or to carry out more complex mathematical calculations (e.g. sin, cos, sqrt).

@meineFarbe: #143352;
@size: 10px;

#header {
  background-color: @meineFarbe;
}
h2 {
  color: saturate(@meineFarbe, 20%);
  font-size: @size * 4;
}

This is compiled to:

#header {
  background-color: #143352;
}
h2 {
  color: #0a335c;
  font-size: 40px;
}

See also

• Sass (stylesheet language)
• Stylus (stylesheet language)
• Bootstrap (Framework)

literature

• Alex Libby: Instant LESS CSS Preprocessor How-to. , Packt Publishing, 2013, ISBN 978-1782163763 .

Web links

Wikiversity: Course: Latest Internet and WWW Technologies / Less CSS  - Course Materials

• Official website (English)
• Less on Github (English)
• Do more in CSS with LESS, IBM Developer Works
• Florence Maurice: CSS concentrate: LESS offers more. PC Magazin, July 3, 2012, accessed October 4, 2013 . 
• Dieter Petereit: 8 free tools: From CSS to LESS and back again. drweb.de, May 9, 2012, accessed October 4, 2013 . 

Individual evidence

1. ↑ CHANGELOG from less.js. Accessed January 28, 2018 .  
2. ↑ Ilja Zaglov: Less is more: How to optimize your CSS workflow with LESS. In: T3N magazine . August 27, 2013, accessed February 6, 2016 .  
3. ↑ About. History. In: lesscss.org . Retrieved February 6, 2016 .  
4. ↑ Usage. In: lesscss.org . Retrieved February 6, 2016 .  
5. ↑ Language Features. Variable. In: lesscss.org . Retrieved February 6, 2016 .  
6. ↑ Language Features. Mixins. In: lesscss.org . Retrieved February 6, 2016 .  
7. ↑ Language Features. Nested Rules. In: lesscss.org . Retrieved February 6, 2016 .  
8. ↑ Language Features. Operations. In: lesscss.org . Retrieved February 6, 2016 .  
9. ↑ Functions. In: lesscss.org . Retrieved February 6, 2016 .