LESS Interview Questions

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

1) What is Less?

Less is a dynamic style sheet producing language that can be compiled into Cascading Style Sheet (CSS) and runs on client side and server side both.

2) Who is the inventor of Less?

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

3) How to create a Less file and where to store and compile it?

Creating and Storing Less file is same as creating and storing CSS files. You can create a Less file

with a .less extension or you can rename an existing .css file to .less file. You can also write Less code

with existing CSS code. The best way of creating it is inside ~/content/ or ~/Styles/ folder.

4) How many ways Less can be used?

Less can be used in three ways:

1. Via npm LESS can be used on the command line.

2. Download as a script file for the browser.

3. It can be used for third party tools.

5) How variables are represented in Less?

The variables are represented as @sing in LESS. While, variable assignment is done with a: (colon)

sing. The values of the variables are inserted into the CSS output file as well as minified file.

6) What is the use of Mixins in Less?

Mixins enable embedding all the properties of a class into another class by including the class name as one of its properties. It works like variables but for whole class.

7) What is nesting in LESS programming?

Nesting in LESS programming specifies the clustering of statements inside other statements.

It forms a group of related codes. For example, if you add a code snippet and add another code inside it,

then the code snippet is called nesting.

8) What are the color channel?s functions used in Less?

List of the color channel functions used in LESS:

• hue
• saturation
• hsvhue
• saturation
• hswalue
• red
• green
• blue
• alpha
• luma
• luminance

9) What is the use of data URI in LESS?

Data URI is a technique that allows developers to avoid external image referencing and instead

embed them directly into a stylesheet. Data URI is the best technique to reduce HTTP requests.

10) What is "Source Map Less Inline"?

The "Source Map Less Inline" option specifies that you should include all of the CSS files into the sourcemap. It means that you only need your map file to get to your original source.

11) what are the differences between Less and Sass?

12) What are the similarities between Less and Sass?

Similarities between Less and Sass:

• Namespaces are similar in both.
• Color functions are similar in both.
• Mixins and parametric mixins are similar in both.
• Nesting capabilities are similar in both.
• JavaScript evaluations are similar in both.

13) What is the use of &combinator in Less?

&combinator concatenates nested selector with the parent selector. It is useful for Pseudo classes

such as : hover and :focus

14) What is the use of operations in Less?

• Simple Mathematical operators: +, ? , *, /
• Color functions
• Math functions etc.

15) What is the use of Escaping in Less?

A list of cases in Less, where Escaping is used:

• When you need to output CSS that is not valid CSS syntax
• Proprietary syntax not recognized by LESS
• LESS compiler will throw an error if not used
• Simple prefix with ~ symbol and put in quotes

16) What may be the alternatives against Less?

SASS: Syntactically Awesome Stylesheets

SCSS: Version.2 of SASS

Stylus

17) How can you invoke the compiler from the command line in Less?

You can invoke the compiler from the command line in LESS as

$ lessc styles.less

It will produce output the compiled CSS to stdout; you can redirect it where you want.

$ lessc styles.less > styles.css

18) What is the use of e() function in Less?

The e() function is used to escape a value so that it passes straight through to the compiled CSS, without being noticed by the LESS compiler.

19) 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.

20) How can you pre-compile Less into CSS?

you can use any of the following method to pre-compile Less into CSS:

• Run less.js using Node.js : By using the Node.js JavaScript framework you can run the less.js script outside the browser.
• Use lessphp: For the implementation of the LESS compiler written in PHP, lessphp is used.
• Use online Compiler: Use online compiler for quick compilation of LESS code without installing a compiler.
• Less. app (for Mac users): Less.app is a free tool for Mac users, this tool auto compiles them into CSS files.