What are basic LESS Interview Questions ?

A list of top frequently asked LESS interview questions and answers are given below.

1) What is Less?

The Learner Style Sheet (Less) is a backward-compatible language that can be compiled into the Cascading Style Sheet (CSS) and runs on both the client side and server side. It is an open source language and cross-browser compatible.

---

2) When does the Less programming language first invented?

The Less programming language was first invented in 2009.

---

3) In which language does the Less first written?

The LESS was first written in Ruby in 2009.

---

4)What is the current language used in Less?

Currently, Less is using JavaScript.

---

5) Who is the inventor of Less?

The Less is designed and developed by Alexis Sellier and Dmitry Fadeyev.

---

6) What is the extension of Less file?

The ".less" is the extension of the Less file. It is always required to use ".Less" extension in Less document file.

---

7) In how many ways we can use Less?

There are three ways to use Less:

• Through the command line.
• Through a third-party tool.
• You can download Less as a script file for the browser.

---

8) How do you represent a variable in Less?

It is required to declare a variable with @ symbol and uses a colon (:) to assigned the particular value in the variable. It is also necessary to add a semi-colon (;) after the value of the variable.

For example:

1. @primarycolor: #FF7F50;  
2. @color:#800080;  
3. h1 {  
4.    color: @primarycolor;  
5. }  
6.   
7. h3 {  
8.    color: @color;  
9. }  

In the above example of Less, the two variables used in the Less programming having values #FF7F50 and #800080.

---

9) What is the use of Mixins in Less?

In Less, Mixins facilitates you to add the set of properties from one rule-set into another rule-set. It includes class names as its properties. Mixins can be declared as the same way as CSS style using a class or id selector. It can store multiple values and can be reused in the code whenever necessary.

Syntax:

1. .round-borders {    
2.   border-radius: 5px;    
3.   -moz-border-radius: 5px;    
4.   -webkit-border-radius: 5px;    
5. }    
6. #menu {    
7.   color: gray;    
8.   .round-borders;    
9. }    

---

10) What is the role of nesting in Less programming?

The nesting is used to make the code simple, clean and Less complicated by allowing it to follow some visual hierarchy. For example nesting of classes can be done in Less programming.

For example:

1. .container {  
2.    h1 {  
3.       font-size: 25px;  
4.       color:#E45456;  
5.    }  
6.    p {  
7.       font-size: 25px;  
8.       color:#3C7949;  
9.    }  
10.   
11.    .myclass {  
12.       h1 {  
13.          font-size: 25px;  
14.          color:#E45456;  
15.       }  
16.       p {  
17.          font-size: 25px;  
18.          color:#3C7949;  
19.       }  
20.    }  
21. }  

In the above Less document example of nesting myclass is the subclass of container class.

---

11) What are the color channel functions in Less?

In Less, color channel functions are in-built functions used to set a value about a channel according to the color definition. The HSL colors consist of hue, saturation and lightness channel and the RGB colors consist of a red, green and blue channel.

---

12) What is the use of data URI (Uniform Resource Identifier) in LESS?

With the help of Data URI, an image can be embedded directly in the stylesheet.

---

13) What does the "Source Map Less Inline" option represent?

The "Source Map Less Inline" option represents that all the CSS files must be included into the source map.

---

14) What is the difference between Less and SASS?

Less	Sass
Less is coded in JavaScript.	SASS is coded in ruby.
It is processed on the client side	It is processed at the client side.
Variables are declared with the @ symbol.	Variables are declared with the $ symbol.
For mixing, it uses Less Mixins.	For mixing, it uses Compass.

---

15) How is Less is similar to Sass?

Following are the similarities between Less and Sass:

• Namespaces are similar in both.
• Color functions are identical in both.
• Nesting capabilities are identical in both.
• JavaScript evaluations are identical in both.

---

16) What is &combinator in Less?

In LESS, &combinator is used to combine the nested selector with the parent selector.

---

17) Does Less support operations?

Yes, Less supports various arithmetic operations such +,? , *, / that can be operated on any color or variable.

---

18) What is the use of Escaping in Less?

The escaping is used when there is a requirement to execute CSS file with invalid syntax.

---

19) Are there any alternatives that can use in place of Less?

Yes, there are various other alternatives can be used in place of Less such as SCSS, stylus.

---

20) How can you invoke the compiler via command line in Less?

To invoke the compiler follow the below command :

1. $ Lessc styles.Less

---

21) What is the purpose of e() function in Less?

The role of e() function is to escape a value from the Less compiler.

---

22) How can you create a loop structure in Less?

When recursive mixins are combined with Pattern matching and guard expressions, it can create various iterative/loop structures.

---

23) What is the best way to pre-compile a Less into CSS?

The easiest way to pre-compile a Less into CSS is to use Less.js with Node.js where Less.js run outside the browser.

---

24) What is the use of Namespaces and Accessors in Less?

The namespaces were used to group the Mixins under a common name. You can perform Encapsulation with the help of Namespaces and Accessors in the Less file.

For example:

1. .class1 {  
2.    .class2 {  
3.       .val(@param) {  
4.          font-size: @param;  
5.          color:green;  
6.       }  
7.    }  
8. }  
9.   
10. .myclass {  
11.    .class1 > .class2 > .val(20px);  
12. }  

---

25) Define scope in the context of variables in LESS programming language.

The scope of variables refers to the place where the variables exist. The variables were searched in the local scope first. If it is not in the local scope, then the compiler search in the parent scope.

For example:

1. @a: 15px;  
2.   
3. .myclass {  
4.    font-size: @a;  
5.    @a:20px;  
6.    color: green;  
7. }  

In the above Less document variable a is defined inside the class with value 20 and variable with the same name is also defined outside the class with value 15. When the compiler executes this Less document, it searches for the local scope first. Hence the local scope of the variable is used. After the compilation process, CSS file is created having font-size value 20px.

---

26) What is commenting?

The commenting refers to some text which is understandable by the humans to understand the working of some complex codes in the programming.

---

27) What is the reaction of the compiler to the comments?

The reaction of the compiler to the comments is nothing. The compiler ignores the comments at the time of compilation of the code.

---

28) How many types of commenting can be done in the Less document?

Two types of comments are allowed in the Less document, inline comments and block comments. However, if you write inline comments in your code, the compiler ignores it and not adds that code to the CSS file. Only block comments will be added to the CSS file.

---

29) What is the use of importing in Less programming? How is it done?

The importing is used to import CSS or Less document into the Less document. Importing can be done by including "@import" followed by the address of the CSS or Less file at the beginning of the Less document.

---

30) What is the use of extend in Less?

The extend is a Less pseudo class which is used to select another selector style in one selector.

For example:

1. h2 {  
2.    &:extend(.style);  
3.    font-style: italic;  
4. }  
5.   
6. .style {  
7.    background: green;  
8. }  

In the above example of extending style class properties have been imported into the properties of h2.

---

31) What are different types of functions available in Less?

The list of different types of functions in Less is as follows:

• Misc function
• String functions
• List function
• Math function
• Type function
• Color definition function
• Color channel function
• Color operation
• Color blending functions