was successfully added to your cart.

What is: LESS

By August 17, 2017Glossary
What is less

LESS (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. While CSS is “code” and an important, valuable skill to master, CSS is not a programming language. The CSS system cannot change its behavior via turning into a complete programming language.

As the browsers upgraded, the browser compatibility issue increased. If you want to build a browser compatible site with CSS, it will be a difficult job. You will have to write CSS as per particular browser, using the vendor prefix, for example, WebKit. Also, reusability of properties was not possible. Many such limitations generated the need for CSS- preprocessors. Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and much more other usable assets. SASS, LESS, and Stylus are the well-known ones. In this article, we plan to explain concepts of LESS.

Magento 2 uses a CSS pre-processor called Less. With Less, designers write their styles in a language similar to CSS. Here is a sample of a Less stylesheet from the Less documentation.

#File: example.less@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {

-webkit-box-shadow: @style @c;

box-shadow: @style @c;

}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {

.box-shadow(@style, rgba(0, 0, 0, @alpha));

}

.box {

color: saturate(@base, 5

border-color: lighten(@base, 30%);

div { .box-shadow(0 0 5px, 30%) }

}

 

As you can see functions like lighten, mixins and variables are used in above code, which helps a designer to reuse the code efficiently. Here are some features of less:

Variable: In LESS language variables are declared with “@”, example, @border-color: #000;

Mixins: Mixins are a way of including (“mixing in”) a bunch of properties from one ruleset into another ruleset. It means you can use all properties defined in mixins multiple times. For example,

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

#menu a {

color: #111;

.bordered;

}

.post a {

color: red;

.bordered;

}

 

Here bordered mixin is used for “a tag” in menu id and post class. The properties of the .bordered class will now appear in both #menu a and .post a. It saves designers time. (Note that you can also use #ids as mixins.)

Functions: There are some Built-in functions supported by Less, for example, check lighten function utilized in the example code above.

Nesting: Less allows you to nest selectors depending on hierarchy. For example, to apply some CSS to #header a tag, you can write:

#header{a

{

}

}

 

LESS file has “.less” extension. CSS compiler will convert it to “.css” file.

Magento will search for CSS file on disk. If Magento doesn’t find it, Magento will look again, but instead of looking for a .css file, Magento will look for a .less file with the same name. If Magento finds the Less source file, Magento will transform the file into CSS, and generate a CSS file. If you load the above CSS in a browser, you’ll see Magento has changed the Less file into a CSS file.

Hope this article helps you to understand less, Thanks for reading.