Top Less Interview Questions and Answers-(2024)

1 .

LESS (Learner Style Sheet) is dynamic style sheet producing language. LESS is a CSS pre-processors and extends CSS with dynamic behaviour. It allows for variables, mixins, operations and functions. LESS runs on server side and client side both.

2 .

When does the Less programming language first invented?

The Less programming language was first invented in 2009.

3 .

In which language Less was implemented?

Less was implemented into JavaScript Language.

4 .

What are the features of Less?

There are following features of Less :

* It is based on JavaScript and CSS.

* It sorts the code redundancy.
* We can define style and it is reusable.
* It is easy to readable code and written in organized way.

5 .

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.

6 .

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.

7 .

Explain how can set code in a watch mode when you run LESS.js in an HTML5 browser?

If you run LESS.js in an HTML5 browser, it will use local storage to cache the generated CSS. However, from the developer point of view they cannot see the changes they made instantly. In order to see your changes instantly, you can load program in development and watch mode by following JavaScript

<script type= "text/javascript">
   less.env = "development " ;
   less.watch () ;
</script>

8 .

Explain what is data-uri in LESS?

In CSS, Data URI's is one of the best technique, it allows developers to avoid external image referencing and instead embed them directly into a stylesheet. Data URIs are the excellent way to reduce HTTP requests.

9 .

Explain what "Source Map Less Inline"?

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

10 .

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 :

@primarycolor: #FF7F50;  
@color:#800080;  
h1 {  
   color: @primarycolor;  
}  
  
h3 {  
   color: @color;  
}

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

11 .

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 :

.box-radius{

border-radius: 2px;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

}

#menu {

color: red;

.box-radius;

}

12 .

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 :

.container {  
   h1 {  
      font-size: 25px;  
      color:#E45456;  
   }  
   p {  
      font-size: 25px;  
      color:#3C7949;  
   }  
  
   .myclass {  
      h1 {  
         font-size: 25px;  
         color:#E45456;  
      }  
      p {  
         font-size: 25px;  
         color:#3C7949;  
      }  
   }  
}

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

13 .

The similarities between Less and Sass are :

* Nesting capabilities

* Namespaces

* Color functions

* Mixins and parametric mixins

* JavaScript evaluations

14 .

What is the difference between Less and Sass?

The difference between Less and Sass are :

Less :
* It uses JavaScript and client-side.
* It is processed at client side.
* It uses @symbol to declare variable.
* It doesn’t inherit multiple selectors.
* It doesn’t work with unknown units.

Sass :

* It uses ruby and processed at server-side.

* It is processed at server side.

* It uses $symbol to declare variable.

* It inherits multiple selectors.

* It allows us to work with unknown units.

15 .

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.

16 .

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.

17 .

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.

18 .

Does Less support operations?

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

19 .

Explain what is the use of Extend "all" in LESS?

When you specify all keyword last in an extend argument, it tells LESS to match that selector as part of another selector.

20 .

Explain what is "StrictImports" in LESS?

The strictImports controls whether the compiler will allow a @import inside of either @media blocks or other selector blocks.

21 .

Explain what is the use of &combinator ?

&combinator concatenates nested selector with the parent selector. It is useful for Pseudo classes such as :hover and :focus

22 .

Explain what is the use of operations in LESS?

Operations can be used for performing functions like

* Simple Mathematical operators : +, – , *, /

* Color functions

* Math functions

* Any size or colour variable can be operated upon

23 .

What does LESS elements contains?

Less elements contain commonly used mixins like :

* .gradient

* .rounded

* .opacity

* .box-shadow

* .inner-shadow

24 .

List out alternatives against LESS?

SASS : Syntactically Awesome Stylesheets

SCSS : Version.2 of SASS

Stylus

25 .

Explain how you can invoke the compiler from the command line?

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

$ lessc styles.less

This will output the compiled CSS to stdout; you may then redirect it to a file of your choice

$ lessc styles.less > styles.css

26 .

Explain how you can pre-compile LESS into CSS?

To pre-compile LESS into CSS you can use

* 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

27 .

What is the use of e () function?

With the help of e() function you can escape a value so that it passes straight through to the compiled CSS, without being noticed by the LESS compiler.

28 .

What are the types of Node.js compilers used in LESS?

In less, there are various Node.js compilers used that are given below :

* grunt-contrib-less

* assemble-less

* gulp-less

* autoless etc.

29 .

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

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 :

h2 {  
   &:extend(.style);  
   font-style: italic;  
}  
  
.style {  
   background: green;  
}