Tutorial by Examples

In Less, unlike Sass or Shell, the variables are declared by having names starting with a @ symbol. For example: @sky-blue: #87ceeb; body { background-color: @sky-blue; } The above example gives you: body { background-color: #87ceeb; } Here it explains how to declare a variable an...

Consider the following example: @sky-blue: #87ceeb; @dark-sky-blue: @sky-blue + #333; body { background-color: @dark-sky-blue; } The above example gives you: body { background-color: #baffff; } Here it explains how to declare a variable and also make operations on a particular va...

To concatenate the value of two or more variables into a single string and print it as the output, we need to make use of interpolation. The following Less code, #demo:after { @var1: Hello; @var2: World!!!; content: "@{var1} @{var2}"; } when compiled would set "Hello Wo...

By default, LESS will use its own calc() unless told otherwise. So: @column-count: 2; .class-example { width: calc(100% / @column-count); } Would compile to this: .class-example { width: 50%; } While it is our desired width, LESS has used it's own calc() function to calculate ...

Variable declaration @buttonColor: #FF0000; /* Now you can use @buttonColor variable with css Functions. */ .product.into.detailed { additional-attributes{ .lib-table-button( background-color: @buttonColor; ); } } Here function lib-tabgle-button used v...