Interview questions for Less and Saas

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. Define SASS?

SASS means Syntactically Awesome Style sheets. It is a CSS preprocessor which is used to reduce repetition with CSS and save time. It adds power and elegance to the basic language and facilitates you to add variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax.

3. Who are these Less interview questions designed for?

All the Front End developers, UI/ UX developers and designers will find these questions extremely useful. All freshers, BCA, BE, BTech, MCA and college students wanting to make a career in front end designing will be highly benefited by these questions.

4. In which language does the Less first written?

The LESS was first written in Ruby in 2009.

5. What are the features of LESS?

  • LESS compiles faster than other preprocessor of CSS.
  •  It is a clean, compact and readable code written in a well organized way.
  •  It supports cross-browser compatibility.
  •  It provides @import rule so you can easily handle external files. Importing is required when we have multiple style sheets.
  •  It facilitates to define styles which can be reused throughout the code.

6. How many ways can we use SASS?

  • We can use SASS in three different ways:
  • As a command line tool.
  •  As a standalone Ruby module.
  •  As a plug-in for any Rack-enabled framework.

7. What is the current language used in Less?

Currently, Less is using JavaScript.

8. What are the disadvantages of LESS?

  •  ESS has a tight coupling between modules so it takes time to reuse and/or test dependent modules.
  • If you are new to CSS preprocessing then it takes time to learn LESS.
  • Less has lesser framework compared to SASS, which consists of frameworks Compass, Gravity and Susy.

9. Who is the inventor of Less?

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

10. How to pre-compile LESS into CSS?

  • To pre-compile LESS into CSS you can use,
  •  Run less.js using Node.js: By using Node.js JavaScript framework, you can run 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): is a free tool for Mac users, this tool auto compiles them into CSS files.

11. 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

12. List out the Data Types that SassScript supports?

Sass Script supports seven main data types

  • Numbers ( eg; 1,5 ,10px)
  • Strings of texts ( g., “foo”, ‘bar’, etc.)
  • Colors (blue, #04a3f9)
  •  Booleans (true or false)
  • Nulls (e.g; null)
  • List of values, separated by space or commas (g., 1.5em, Arial, Helvetica etc.)
  • Maps from one value to another (g., ( key 1: value1, key 2: Value 2))

13. Explain what is a @extend function used for in Sass?

In Sass, the @EXTEND directive provides a simple way to allow a selector to inherit the styles of another one. It aims at providing a way for a selector A to extend the styles from a selector B. When doing so, the selector A will be added to selector B so they both share the same declarations. @EXTEND prevents code bloat by grouping selectors that share the same style into one rule.

14. Explain what is the use of the @IMPORT function in Sass?

  •  Extends the CSS import rule by enabling import of SCSS and Sass files
  • All imported files are merged into a single outputted CSS file
  • Can virtually mix and match any file and be certain of all your styles
  •  @IMPORT takes a filename to import

15. What are the advantages of Sass?

  • Time saving.
  • More efficient and quicker.
  •  Compatible with all versions of CSS.
  •  You can use nested syntax and useful functions such as color manipulation, mathematics and other values.
  •  Write clean CSS in programming construct
  • It is the super set of the CSS and using nested and others value.

16. Does Sass support inline comments?

Line comments // will be removed by the .scss pre-processor and won’t appear in your .css file
While the comment */ are valid CSS, and will be preserved between the translation from .scss to your .css file

17. How interpolation is used in Sass?

In Sass, you can define an element in a variable and interpolate it inside the Sass code. It is useful when you keep your modules in separate files.

18. What is the use of Extend in LESS?

Extend is a feature of LESS.

This feature acts as a pseudo class which extends other selector styles in one selector by using :extend selector. Extend is placed into rule set or attached to a selector

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

20. Explain what is the use of Escaping?

The use of escaping in LESS

  • 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

21. What does LESS elements contains?

Less elements contain commonly used mixins like

  • Gradient
  • Rounded
  • Opacity
  • Box-shadow
  • Inner-shadow

leave your comment

Your email address will not be published. Required fields are marked *