LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for website. LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.
CSS Preprocessor is a scripting language that extends CSS and gets compiled into regular CSS syntax, so that it can be read by your web browser. It provides functionalities like variables, functions, mixins and operations that allow you to build dynamic CSS.
Why LESS?
Let us now understand why do we use LESS.
LESS supports creating cleaner, cross-browser friendly CSS faster and easier.
LESS is designed in JavaScript and also created to be used in live, which compiles faster than other CSS pre-processors.
LESS keeps your code in modular way which is really important by making it readable and easily changeable.
Faster maintenance can be achieved by the use of LESS variables.
History
LESS was designed by Alexis Sellier in 2009. LESS is an open-source. The first version of LESS was written in Ruby; in the later versions, the use of Ruby was replaced by JavaScript.
Features
Cleaner and more readable code can be written in an organized way.
We can define styles and it can be reused throughout the code.
LESS is based on JavaScript and is a super set of CSS.
LESS is an agile tool that sorts out the problem of code redundancy.
Advantages
LESS easily generates CSS that works across the browsers.
LESS enables you to write better and well-organized code by using nesting.
Maintenance can be achieved faster by the use of variables.
LESS enables you to reuse the whole classes easily by referencing them in your rule sets.
LESS provides the use of operations that makes coding faster and saves time.
Disadvantages
It takes time to learn if you are new to CSS preprocessing.
Due to the tight coupling between the modules, more efforts should be taken to reuse and/or test dependent modules.
LESS has less framework compared to older preprocessor like SASS, which consists of frameworks Compass, Gravity and Susy.
LESS - Installation
In this chapter, we will understand, in a step-by-step manner, how to install LESS.
System Requirements for LESS
Operating System − Cross-platform
Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.
Installation of LESS
Let us now understand the installation of LESS.
Step 1 − We need NodeJs to run LESS examples. To download NodeJs, open the link https://nodejs.org/en/, you will see a screen as shown below −
Dowload the Latest Features version of the zip file.
Step 2 − Run the setup to install the Node.js on your system.
Step 3 − Next, Install LESS on the server via NPM (Node Package Manager). Run the following command in the command prompt.
npm install -g less
Step 4 − After successful installation of LESS, you will see the following lines on the command prompt −
Let us now create a file style.less which is quite similar to CSS, the only difference is that it will be saved with .less extension. Both the files, .html and .less should be created inside the folder nodejs.
Compile style.less file to style.css by using the following command −
lessc style.less style.css
When you run the above command, it will create the style.css file automatically. Whenever you change the LESS file, it's necessary to run the above command in the cmd and then the style.css file will get updated.
The style.css file will have the following code when you run the above command −
style.css
h1 {
color: #FF7F50;
}
h3 {
color: #800080;
}
Output
Let us now carry out the following steps to see how the above code works −
Save the above html code in the hello.htm file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Nested Rules
Description
It is a group of CSS properties which allows using properties of one class into another class and includes the class name as its properties. In LESS, you can declare mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.
Example
The following example demonstrates the use of nested rules in the LESS file −
<html>
<head>
<title>Nested Rules</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "container">
<h1>First Heading</h1>
<p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<div class = "myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</div>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the nested_rules.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Nested Directives and Bubbling
Description
You can nest the directives such as media and keyframe in the same manner, the way you nest the selectors. You can place the directive on top and its relative elements will not be changed inside its rule set. This is known as the bubbling process.
Example
The following example demonstrates the use of the nested directives and bubbling in the LESS file −
<html>
<head>
<title>Nested Directives</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Nested Directives</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the nested_directives_bubbling.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Operations
Description
LESS provides support for some arithmetical operations such as plus (+), minus (-), multiplication (*) and division (/) and they can operate on any number, color or variable. Operations save lot of time when you are using variables and you feel like working on simple mathematics.
Example
The following example demonstrates the use of operations in the LESS file −
<html>
<head>
<title>Less Operations</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Operations</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
style.css
.myclass {
font-size: 20px;
color: green;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the operations.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Escaping
Description
It builds selectors dynamically and uses property or variable value as arbitrary string.
Example
The following example demonstrates the use of escaping in the LESS file −
<html>
<head>
<title>Less Escaping</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Escaping</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
Now create the style.less file.
style.less
p {
color: ~"green";
}
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command, it will create the style.css file automatically with the following code −
style.css
p {
color: green;
}
Anything written inside ~"some_text" will be displayed as some_text after compiling the LESS code to CSS code.
Output
Let us now perform the following steps to see how the above code works −
Save the above html code in the escaping.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Functions
Description
LESS maps JavaScript code with manipulation of values and uses predefined functions to manipulate HTML elements aspects in the style sheet. It provides several functions to manipulate colors such as round function, floor function, ceil function, percentage function etc.
Example
The following example demonstrates the use of functions in the LESS file −
<html>
<head>
<title>Less Functions</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Functions</h1>
<p class = "mycolor">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Now execute the above command; it will create the style.css file automatically with the following code −
style.css
.mycolor {
color: #FF8000;
width: 100%;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the functions.html file.
Open this HTML file in a browser, displayed you will receive the following output.
LESS - Namespaces and Accessors
Description
Namespaces are used to group the mixins under a common name. Using namespaces, you can avoid conflict in name and encapsulate a group of mixins from outside.
Example
The following example demonstrates the use of namespaces and accessors in the LESS file −
<html>
<head>
<title>Less Namespaces and Accessors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Namespaces and Accessors</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
style.css
.myclass {
font-size: 20px;
color: green;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the namespaces_accessors.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Scope
Description
Variable scope specifies the place of the available variable. The variables will be searched from the local scope and if they are not available, then compiler will search from the parent scope.
Example
The following example demonstrates the use of namespaces and accessors in the LESS file −
<html>
<head>
<title>Less Scope</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Scope</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
style.css
.myclass {
font-size: 20px;
color: green;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the scope.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Comments
Description
Comments make the code clear and understandable for the users. You can use both the block style and the inline comments in the code, but when you compile the LESS code, the single line comments will not appear in the CSS file.
Example
The following example demonstrates the use of comments in the LESS file −
<html>
<head>
<title>Less Comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Comments</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
</body>
</html>
Now create the style.less file.
style.less
/* It displays the
green color! */
.myclass {
color: green;
}
// It displays the blue color
.myclass1 {
color: red;
}
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Now execute the above command; it will create the style.css file automatically with the following code −
style.css
/* It displays the
green color! */
.myclass {
color: green;
}
.myclass1 {
color: red;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the comments.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Importing
Description
It is used to import the contents of the LESS or CSS files.
Example
The following example demonstrates the use of importing in the LESS file −
<html>
<head>
<title>Less Importing</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Importing</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
<p class = "myclass2">LESS supports creating cleaner,
cross-browser friendly CSS faster and easier.</p>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the importing.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Variables
In this chapter, we will discuss the Variables in LESS. LESS allows variables to be defined with an @ symbol. The Variable assignment is done with a colon(:).
The following table demonstrates the use of LESS variables in detail.
Default variable has an ability to set a variable only when it is not already set. This feature is not required because variables can be easily overridden by defining them afterwards.
LESS - Extend
Extend is a LESS pseudo class which extends other selector styles in one selector by using :extend selector.
Example
The following example demonstrates the use of extend in the LESS file −
extend_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<p>Hello!!!!!</p>
</div>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the extend_syntax.htm file.
Open this HTML file in a browser, the following output will get displayed.
Extend Syntax
Extend is placed into ruleset or attached to a selector. It is similar to a pseudo class containing one or more classes, which are separated by comma. Using the optional keyword all, each selector can be followed.
Example
The following example demonstrates the use of extend syntax in the LESS file −
extend_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<div class = "container">
<p>Hello!!!!!</p>
</div>
</div>
</body>
</html>
Using extend we can combine the same styles of a particular selectors into other selector.
LESS - Mixins
Mixins are similar to functions in programming languages. Mixins are a group of CSS properties that allow you to use properties of one class for another class and includes class name as its properties. In LESS, you can declare a mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.
The following table demonstrates the use of LESS mixins in detail.
The !important keyword is used to override the particular property.
Example
The following example demonstrates the use of mixins in the LESS file −
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>LESS Mixins</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p class = "p1">LESS is a CSS pre-processor that enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<p class = "p3">LESS is cross browser friendly.</p>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the less_mixins.html file.
Open this HTML file in a browser, the following output will get displayed.
The parentheses are optional when calling mixins. In the above example, both statements .p1(); and .p1; do the same thing.
LESS - Parametric Mixins
Description
Parametric mixins use one or more parameters that extend functionality of LESS by taking arguments and its properties to customize the mixin output when mixed into another block.
For instance, consider a simple LESS code snippet −
Here we are using the parametric mixin as .border with three parameters - width, style and color. Using these parameters, you can customize the mixin output with the passed parameters value.
The following table describes the different types of parametric mixins along with description.
Change the behavior of mixin by passing parameters to it.
LESS - Mixins as Functions
In this chapter, we will understand the importance of Mixins as Functions. Like functions, mixins can be nested, can accept parameters, and return values too.
The following table demonstrates the use of mixins as functions in details.
Whenever a mixin is defined inside another mixin, it can be used as return value too.
LESS - Passing Rulesets to Mixins
Description
Detached ruleset contains rulesets such as properties, nested rulesets, variables declaration, mixins, etc. It is stored in a variable and included in another structure; all the properties of the ruleset get copied to that structure.
Example
The following example shows how to pass a ruleset to mixin in the LESS file −
passing_ruleset.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web.</p>
</div>
</body>
</html>
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
style.css
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the passing_ruleset.htm file.
Open this HTML file in a browser, the following output will get displayed.
Scoping
All variables and mixins in detached ruleset are available wherever the ruleset called or defined. Otherwise, both the caller and the definition scopes are available by default. The declaration scope takes the priority when both scopes contain same mixin or variable. Detached ruleset body is defined in the declaration scope. It does not change its scope after the detached ruleset is copied from one variable to another.
The following table lists all the types of scope −
The detached ruleset can access to scope by being imported into it.
LESS - Import Directives
Description
The @import directive is used to import the files in the code. It spreads the LESS code over different files and allows to maintain the structure of code easily. You can put the @import statements anywhere in the code.
For instance, you can import the file by using @import keyword as @import "file_name.less".
File Extensions
You can use the @import statements depending on the different file extensions such as −
If you are using .css extension, then it will be considered as CSS and the @import statement remains as it is.
If it contains any other extension, then it will be considered as LESS and will be imported.
If there is no LESS extension, then it will appended and included as imported LESS file.
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
Example
The following example demonstrates the use of variable in the SCSS file −
<!doctype html>
<head>
<title>Import Directives</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Import Directives</h2>
<p class = "myline">Welcome to Tutorialspoint...</p>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the import_directives.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Import Options
In this chapter, we will understand the importance of Import Options in LESS. LESS offers the @import statement that allows the style sheets to import both LESS and CSS style sheets.
The following tables lists the import directives that will be implemented in the import statements.
It continues compiling even though the file to import is not found.
More than one keyword is allowed to use in the @import statement, however you have to use commas to seperate the keywords.
For instance −
@import (less, optional) "custom.css";
LESS - Mixin Guards
Description
If you want to match simple values or number of arguments on expressions, then you can make use of guards. It is associated with mixin declaration and includes condition that is attached to a mixin. Each mixin will have one or more guards which are separated by comma; a guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and performs calculations to specify matched mixin.
The following table describes the different types of mixins guards along with description.
Follow these steps to see how the above code works −
Save the above html code in the mixin-guard.html file.
Open this HTML file in a browser, the following output will get displayed.
LESS - CSS Guards
Description
Guards are used to match simple values or a number of arguments on expressions. It is applied to the CSS selectors. It is syntax for declaring mixin and calling it immediately. To successfully bring out the if type statement; join this with feature &, which allows you to group multiple guards.
Example
The following example demonstrates the use of css guard in the LESS file −
css_guard.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div class = "style">
<h3>The largest Tutorials Library on the web.</h3>
</div>
</body>
</html>
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
style.css
.style {
background-color: blue;
color: white;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the css_guard.htm file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Loops
In this chapter, we will understand how Loops work in LESS. Loops statement allows us to execute a statement or group of statements multiple times. Various iterative/loop structures can be created when recursive mixin combine with Guard Expressions and Pattern Matching.
Example
The following example demonstrates the use of loops in the LESS file −
loop_example.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web. </p>
</div>
</body>
</html>
Next, create the style.less file.
style.less
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
Follow these steps to see how the above code works −
Save the above html code in the loop_example.htm file.
Open this HTML file in a browser, the following output will get displayed.
LESS - Merge
Description
This feature in LESS allows the addition of values to comma or space separated list from multiple properties using a single property. It can be used for background and transform properties.
The following table describes the two types of functions supported by the Merge feature.
In this chapter, let us understand how Parent Selectors work. It is possible to reference the parent selector by using the &(ampersand) operator. Parent selectors of a nested rule is represented by the & operator and is used when applying a modifying class or pseudo class to an existing selector.
The following table shows the types of parent selector −
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
style.css
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
In the above example, & refers to selector a.
Output
Follow these steps to see how the above code works −
Save the above html code in the parent_selector1.htm file.
Open this HTML file in a browser, the following output will get displayed.
The Parent selectors operator has many uses like, when you need to combine the nested rule's selectors in other way than the default. Another typical use of & is to generate class names repeatedly. For more information click here.
LESS - Misc Functions
Misc functions consist of a group of functions of a different kind.
The following table lists all the types of misc functions −
svg-gradient is a transition of one color to another. It can add many colors to the same element.
LESS - String Functions
Description
Less supports some of the string functions as listed below −
escape
e
% format
replace
The following table describes the above string functions along with description.
Sr.No.
Types & Description
Example
1
Escape
It encodes a string or information by using URL encoding on special characters. You could not encode some characters such as , , / , ? , @ , & , + , ~ , ! , $ , ' and some characters you can encode such as \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ and =.
escape("Hello!! welcome to Tutorialspoint!")
It outputs escaped string as −
Hello%21%21%20welcome%20to%20Tutorialspoint%21
2
e
It is a string function which uses string as parameter and returns the information without quotes. It is a CSS escaping which uses ~"some content" escaped values and numbers as parameters.
filter: e("Hello!! welcome to Tutorialspoint!");
It outputs escaped string as −
filter: Hello!! welcome to Tutorialspoint!;
3
% format
This function formats a string. It can be written with the following format −
LESS provides number of useful color functions to alter and manipulate colors in different ways. LESS supports some of the Color Definition Functions as shown in the table below −
Sr.No.
Function & Description
Example
1
rgb
It creates color from red, green and blue values. It has following parameters −
red − It contains integer between 0 - 255 or percentage between 0 - 100%.
green − It contains integer between 0 - 255 or percentage between 0 - 100%.
blue − It contains integer between 0 - 255 or percentage between 0 - 100%.
rgb(220,20,60)
it converts color with rgb values as −
#dc143c
2
rgba
It determines color from red, green, blue and alpha values. It has the following parameters −
red − It contains integer between 0 - 255 or percentage between 0 - 100%.
green − It contains integer between 0 - 255 or percentage between 0 - 100%.
blue − It contains integer between 0 - 255 or percentage between 0 - 100%.
alpha − It contains number between 0 - 1 or percentage between 0 - 100%.
rgba(220,20,60, 0.5)
it converts color object with rgba values as −
rgba(220, 20, 60, 0.5)
3
argb
It defines hex representation of color in #AARRGGBB format. It uses the following parameter −
color − It specifies color object.
argb(rgba(176,23,31,0.5))
it returns the argb color as −
#80b0171f
4
hsl
It generates the color from hue, saturation and lightness values. It has following parameters −
hue − It contains integer between 0 - 360 which represents degrees.
saturation − It contains number between 0 - 1 or percentage between 0 - 100%.
lightness − It contains number between 0 - 1 or percentage between 0 - 100%.
hsl(120,100%, 50%)
it returns the color object using HSL values as −
#00ff00
5
hsla
It generates the color from hue, saturation, lightness and alpha values. It has the following parameters −
hue − It contains integer between 0 - 360 which represents degrees.
saturation − It contains number between 0 - 1 or percentage between 0 - 100%.
lightness − It contains number between 0 - 1 or percentage between 0 - 100%.
alpha − It contains number between 0 - 1 or percentage between 0 - 100%.
hsla(0,100%,50%,0.5)
it specifies the color object using HSLA values as −
rgba(255, 0, 0, 0.5);
6
hsv
It produces the color from hue, saturation and value values. It contains following parameters −
hue − It contains integer between 0 - 360 which represents degrees.
saturation − It contains number between 0 - 1 or percentage between 0 - 100%.
value − It contains number between 0 - 1 or percentage between 0 - 100%.
hsv(80,90%,70%)
it converts color object with hsv values as −
#7db312
7
hsva
It produces the color from hue, saturation, value and alpha values. It uses the following parameters −
hue − It contains integer between 0 - 360 which represents degrees.
saturation − It contains number between 0 - 1 or percentage between 0 - 100%.
value − It contains number between 0 - 1 or percentage between 0 - 100%.
alpha − It contains number between 0 - 1 or percentage between 0 - 100%.
hsva(80,90%,70%,0.6)
it specifies color object with hsva values as −
rgba(125, 179, 18, 0.6)
LESS - Color Channel Functions
In this chapter, we will understand the importance of Color Channel Functions in LESS. LESS supports few in-built functions which set value about a channel. The channel set the value depending on the color definition. The HSL colors have hue, saturation and lightness channel and the RGB color have red, green and blue channel. The following table lists out all the color channel functions −
Sr.No.
Function & Description
Example
1
hue
In HSL color space, the hue channel is extracted off the color object.
background: hue(hsl(75, 90%, 30%));
It compiles in the CSS as shown below −
background: 75;
2
saturation
In HSL color space, the saturation channel is extracted off the color object.
background: saturation(hsl(75, 90%, 30%));
It compiles in the CSS as shown below −
background: 90%;
3
lightness
In HSL color space, the lightness channel is extracted off the color object.
background: lightness(hsl(75, 90%, 30%));
It compiles in the CSS as shown below −
background: 30%;
4
hsvhue
In HSV color space, the hue channel is extracted off the color object.
background: hsvhue(hsv(75, 90%, 30%));
It compiles in the CSS as shown below −
background: 75;
5
hsvsaturation
In HSL color space, the saturation channel is extracted off the color object.
background: hsvsaturation(hsv(75, 90%, 30%));
It compiles in the CSS as shown below −
background: 90%;
6
hsvvalue
In HSL color space, the value channel is extracted off the color object.
background: hsvvalue(hsv(75, 90%, 30%));
It compiles in the CSS as shown below −
background: 30%;
7
red
The red channel is extracted off the color object.
background: red(rgb(5, 15, 25));
It compiles in the CSS as shown below −
background: 5;
8
green
The green channel is extracted off the color object.
background: green(rgb(5, 15, 25));
It compiles in the CSS as shown below −
background: 15;
9
blue
The blue channel is extracted off the color object.
background: blue(rgb(5, 15, 25));
It compiles in the CSS as shown below −
background: 25;
10
alpha
The alpha channel is extracted off the color object.
background: alpha(rgba(5, 15, 25, 1.5));
It compiles in the CSS as shown below −
background: 2;
11
luma
luma value is calculated off a color object.
background: luma(rgb(50, 250, 150));
It compiles in the CSS as shown below −
background: 71.2513323%;
12
luminance
The luma value is calculated without gamma correction.
background: luminance(rgb(50, 250, 150));
It compiles in the CSS as shown below −
background: 78.53333333%;
LESS - Color Operation
Description
LESS provides number of useful operation functions to alter and manipulate colors in different ways and take parameters in the same units. LESS supports some of the Color Operation Functions as shown in the table below −
It sets the contrast for the colors in the element.
LESS - Color Blending Functions
In this chapter, we will understand the Color Blending Functions in LESS. These are similar operations used in image editors like Photoshop, Fireworks or GIMP, which matches your CSS colors to your images.
The following table shows the color blending functions used in LESS.
It works opposite to difference function, which subtracts first color from second color.
LESS - Command Line Usage
Using the command line, we can compile the .less file to .css.
Installing lessc for Use Globally
The following command is used to install lessc with npm(node package manager) to make the lessc available globally.
npm install less -g
You can also add a specific version after the package name. For example npm install less@1.6.2 -g
Installing for Node Development
The following command is used to install the latest version of lessc in your project folder.
npm i less -save-dev
It is also added to the devDependencies in your project package.json.
Beta releases of lessc
It is tagged as beta when the lessc structure is published to npm Here, the new functionality is developed periodically. less -v is used to get the current version.
Installing an unpublished development version of lessc
The commit - ish is to be specified, when we proceed to install an unpublished version of lessc and the instructions need to be followed for identifying a git URL as a dependency. This will ensure that you are using the correct version of leesc for your project.
Server-Side and Command Line Usage
bin/lessc includes binary in the repository. It works with Windows, OS X and nodejs on *nix.
Command Line Usage
Input is read from stdin when source is set to dash or hyphen(-).
For instance, we can compile .less to .css by using the following command −
lessc stylesheet.less stylesheet.css
We can compile .less to .css by and minify the result using the following command.
lessc -x stylesheet.less stylesheet.css
Options
Following table lists out options used in command line usage −
Sr.No.
Options & Description
Command
1
Help
Help message is displayed with the options available.
lessc -help
lessc -h
2
Include Paths
It includes the available paths to the library. These paths can be referenced simply and relatively in the Less files. The paths in windows are separated by colon(:) or semicolon(;).
lessc --include-path = PATH1;PATH2
3
Makefile
It generates a makefile import dependencies list to stdout as output.
lessc -M
lessc --depends
4
No Color
It disables colorized output.
lessc --no-color
5
No IE Compatibility
It disables IE compatibility checks.
lessc --no-ie-compat
6
Disable Javascript
It disables the javascript in less files.
lessc --no-js
7
Lint
It checks the syntax and reports error without any output.
lessc --lint
lessc -l
8
Silent
It forcibly stops the display of error messages.
lessc --silent
lessc -s
9
Strict Imports
It force evaluates imports.
lessc --strict-imports
10
Allow Imports from Insecure HTTPS Hosts
It imports from the insecure HTTPS hosts.
lessc --insecure
11
Version
It displays the version number and exits.
lessc -version
lessc -v
12
Compress
It helps in removing the whitespaces and compress the output.
lessc -x
lessc --compress
13
Source Map Output Filename
It generates the sourcemap in less. If sourcemap option is defined without filename then it will use the extension map with the Less file name as source.
lessc --source-map
lessc -source-map = file.map
14
Source Map Rootpath
Rootpath is specified and should be added to Less file paths inside the sourcemap and also to the map file which is specified in your output css.
lessc --source-map-rootpath = dev-files/
15
Source Map Basepath
A path is specified which has to be removed from the output paths. Basepath is opposite of the rootpath option.
lessc --source-map-basepath = less-files/
16
Source Map Less Inline
All the Less files should be included in the sourcemap.
lessc --source-map-less-inline
17
Source Map Map Inline
It specifies that in the output css the map file should be inline.
lessc --source-map-map-inline
18
Source Map URL
A URL is allowed to override the points in the map file in the css.
lessc --source-map-url = ../my-map.json
19
Rootpath
It sets paths for URL rewriting in relative imports and urls.
lessc -rp=resources/
lessc --rootpath=resources/
20
Relative URLs
In imported files, the URL are re-written so that the URL is always relative to the base file.
lessc -ru
lessc --relative-urls
21
Strict Math
It processes all Math function in your css. By default, it's off.
lessc -sm = on
lessc --strict-math = on
22
Strict Units
It allows mixed units.
lessc -su = on
lessc --strict-units = on
23
Global Variable
A variable is defined which can be referenced by the file.
lessc --global-var = "background = green"
24
Modify Variable
This is unlike global variable option; it moves the declaration at the end of your less file.
lessc --modify-var = "background = green"
25
URL Arguments
To move on to every URL, an argument is allowed to specify.
Less is used in the browser when you want to compile the Less file dynamically when needed and not on the serverside; this is because less is a large javascript file.
To begin with, we need to add the LESS script to use LESS in the browser −
<script src = "less.js"></script>
To find the style tags on page, we need to add the following line on the page. It also creates the style tags with the compiled css.
<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>
Setting Options
Before the script tag, options can be set on the less object programmatically. It will affect all the programmatic usage of less and the initial link tags.
The points that need to be considered for attribute options are −
window.less < script tag < link tag are the importance level.
The data attributes cannot be written in camel case; the link tag option are represented as time options.
The data attributes with non-string values should be JSON valid.
Watch Mode
The watch mode can be enabled by setting the env option to development and call the less.watch() after the less.js file is added. If you want the watch mode to be enabled on a temporary basis, then add #!watch to the URL.
Run time modification of LESS variable is enabled. LESS file is recompiled when new value is called. The following code shows the basic usage of modify variables −
We can add the option !dumpLineNumbers:mediaquery to the url or dumpLineNumbers option as mentioned above. The mediaquery option can be used with FireLESS(It display the original LESS file name and line number of LESS-generated CSS styles.)
Options
Before loading the script file less.js, options have to be set in a global less object.
async − It is a Boolean type. The imported files are requested whether with the option async or not. By default, it is false.
dumpLineNumbers − It is a string type. In the output css file, the source line information is added when the dumpLineNumbers is set. It helps in debugging the particular rule came from.
env − It is a string type. The env may run on development or production. Development is set automatically when the document URL starts with file:// or it is present in your local machine.
errorReporting − When the compilation fails, the error reporting method can be set.
fileAsync − It is a Boolean type. When a page is present with a file protocol then it can request whether to import asynchronously or not.
functions − It is object type.
logLevel − It is a number type. It displays the logging level in the javascript console.
2 : Information and errors
1 : Errors
0 : Nothing
poll − In the watch mode, the time displays in milliseconds between the polls. It is an integer type; by default, it is set to 1000.
relativeUrls − The URLs adjust to be relative; by default, this option is set as false. This means that the URLs are relative already to the entry less file. It is a Boolean type.
globalVars − Inserts the list of global variables into the code. The string type variable should be included in quotes
modifyVars − It is unlike the global variable option. It moves the declaration at the end of your less file.
rootpath − It sets paths at the start of every URL resource.
useFileCache − Uses per session file cache. The cache in less files is used to call the modifyVars where all the less files will not retrieve again.
LESS - Browser support
LESS is cross-browser friendly. It supports modern browsers such as Google Chrome, Mozilla Firefox, Safari and Internet Explorer and allows reusing CSS elements and write LESS code with the same semantics. You must be careful about the performance implications while using LESS on the client side and while displaying the JavaScript to avoid any cosmetic issues such as
Spelling mistakes,
Color changes,
Texture
Look
Links, etc.
Compile the LESS files on the server side to improve the performance levels of the website.
PhantomJS does not implement Function.prototype.bind function, so you need to use es5 shim JavaScript engine to run under PhantomJS. Users can make adjustments with variables to affect the theme and show them in real time by using the client side LESS in the production.
If you want to run LESS in older browsers, then use the es-5 shim JavaScript engine which adds JavaScript features that LESS supports. You can use attributes on the script or link tags by using JSON.parse which must be supported by the browser.
LESS - Plugins
In this chapter, we will understand how a Plugin can be uploaded to expand the functionality of the site. Plugins can be used to make your work easier.
Command Line
To install plugin using command line, you first need to install the lessc plugin. The plugin can be installed using less-plugin at the beginning. The following command line will help you install the clean-css plugin −
npm install less-plugin-clean-css
Directly, you can use the installed plugin by using the following command −
lessc --plugin = path_to_plugin = options
Using a Plugin in Code
In Node, the plugin is required and it is pass in an array as an option plugin to the less.
The options is an optional argument which returns a promise when you don't specify the callback and returns a promise when you specify the callback. You can display the file by reading it into string and set the filename fields of the main file.
The sourceMap option allows to set sourcemap options such as sourceMapURL, sourceMapBasepath, sourceMapRootpath, outputSourceFiles and sourceMapFileInline. The point that needs to be considered here is that the sourceMap option is not available for the less.js.
You can gain access to the log by adding a listener as shown in the below format −
The above defined functions are optional. If an error is displayed, then it will pass the error to callback or promise present in the less.render.
LESS - Online Compilers
In this chapter, we will understand the importance of online compilers in LESS. Online compilers are used to compile the less code into css code. Online compilers tools easily help to generate the css code. Following are the available online less compilers −
In this chapter, we will understand the GUIs for LESS. You can use different LESS tools for your platform. For command line usage and tools click this link.
The following table lists the GUI compilers that supports cross platform.
It supports across platforms like Windows, Mac and Linux. It provides editor with integrated compiling.
2
Mixture
It is a rapid prototyping and static site generation tool used by designers and developers. It is quick, efficient and works well with your editor. It brings together a collection of awesome tools and best practices.
It is a minimalistic LESS compiler. It provides drag, drop and compile functionality. SimpLESS supports prefixing your CSS by using prefixr which is the unique feature of SimpLESS. It is built on Titanium platform.
Initially it was a clone of LESS.app, it has several settings and takes more feature complete approach. It supports starting with command line arguments.
The following table lists the GUI compilers that supports OS X platform.
It is gui frontend for lessc. It has features like log viewer, auto compile, opening the LESS file with the chosen editor and sourcemap support.
LESS - Editors and Plugins
In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site.
It is an open-source Java-based IDE. This helps in the quick development of your desktop, mobile and web applications as well as HTML5 applications that involve HTML, JavaScript and CSS.
It is a general purpose graphical text editor for Mac OS X. It features declarative customizations, recordable macros, snippets, shell integration, open documents tabs and an extensible bundle system.
WebStrom is a lightweight and powerful IDE. It is perfectly equipped for complex client-side and server development with Node.js. PhpStorm is an PHP IDE, which supports deep code understanding, and provides top-notch coding assistance and support for all major tools and frameworks.
It is a portable integrated development environment (IDE) primarily for PHP. It also supports HTML, CSS and JavaScript development and plugins are available for Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii and CakePHP.
This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor.
Sublime Text 2 & 3
The sublime text provides different options for LESS as listed in the following table −
assemble-less is a powerful grunt plugin for compiling LESS file to CSS. The less task pulls JSON and Lo - dash(underscore) template for defining the LESS bundles, UI components, compressed stylesheets or themes.
It is used to allow the processing for connect JS framework of LESS files. It compiles source file on request and cache the compiled data for next request.
Other Technologies
Following are a few othertechnologies that help you compile a LESS code.
Wro4j Runner CLI
You can download the wro4j-runner.jar and can compile your LESS code in CSS by using the following command −
