less : Interview Questions
LESS 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.
Creating or storing LESS file is similar to creating/storing CSS file. A new LESS file can be created with a .less extension, or you can rename existing .css file to .less file. You can write LESS code with existing CSS code.
The best way of creating it inside ~/content/ or ~/Styles/ folder
- Via npm LESS can be used on the command line
- Download as a script file for the browser
- For third party tools, it is used
LESS allows variables to be defined. In LESS, the variable is represented as @sing. 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.
Mixins enable embedding all the properties of a class into another class by including the class name as one of its properties. It is just like variables but for whole classes.
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
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
When you specify all keyword last in an extend argument, it tells LESS to match that selector as part of another selector.
The strictImports controls whether the compiler will allow a @import inside of either @media blocks or other selector blocks
Each style-sheet language is good in their perspective and use; however there are few differences in their usage.
|Variable names are prefaced with the @symbol||Variable name are prefaced with $ symbol|
|LESS does not inherit multiple selectors with one set of properties||Sass inherits multiple selectors with one set of properties|
|LESS does not work with “unknown” units neither it returns syntax error notification for incompatible units or maths related syntax error||Sass allows you to work with “unknown” units also returns a syntax error notification for incompatible units|
&combinator concatenates nested selector with the parent selector. It is useful for Pseudo classes such as :hover and :focus
Operations can be used for performing functions like
- Simple Mathematical operators: +, – , *, /
- Color functions
- Math functions
- Any size or colour variable can be operated upon