SASS Interview Questions
A list of frequently asked SASS interview questions and answers are given below.
1) 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.
2) Who is the inventor of SASS?
SASS was developed by Natalie Weizenbaum and was designed by Hampton Catlin. So, Hampton Catlin is credited as the designer of SASS, and he is also known as the father of SASS.
3) What are the reasons behind using SASS?
Following are some important reasons behind the popularity of SASS.
4) How many ways can we use SASS?
We can use SASS in three different ways:
5) What are the most attractive features of SASS?
6) Which data types does the Sass Script supports?
Following data types are supported by the Sass Script:
SASS always supports all other types of CSS property value such as Unicode range, special character, and unquoted string.
7) How can you define a variable in SASS?
The variables in SASS start with a ($) sign, and variable assignment is done with a colon(:).
8) What are the main differences between SCSS and SASS?
Following is the list of main differences between SCSS and SASS:
9) Explain the use of Sass @import function?
10) What are the main advantages of SASS?
Following is a list of main advantages of SASS:
11) What are the main disadvantages of SASS?
Following is a list of main disadvantages of SASS:
12) How can you refer a parent selector in the SASS?
We can easily select the parent selector by using the & character. It specifies where we should insert the parent selector.
13) What is the use of list operations in SASS?
In SASS, the list operations are used to represent series of values that are separated using commas or space.
14) What is the use of Selector Nesting in SASS?
In SASS, Selector Nesting is a process that offers a way for style sheet authors to compute long selectors by nesting shorter selectors within each other.
15) Does SASS support inline comments?
In SASS, the single-line comments // are removed by the .scss preprocessor and don't appear in the .css file, while the comment */is valid CSS and will be preserved between the translation from .scss to your .css file.
16) What is the use of the @mixin directive?
The @mixin directive is used to define the mixins that include the variables and argument optionally after the name of the mixin.
17) How can you use interpolation in SASS?
In SASS, we can easily define an element in a variable and interpolate it inside the SASS code. It is useful when we keep our modules in separate files.
18) What do you understand by compressed CSS style?
As the name suggests, the compressed CSS style takes the least amount of space compared to all other CSS styles. It provides whitespaces only to separate selectors and newlines at the end of the file.
19) Can you nest variables within variables in SASS?
In SASS, the interpolation of variables is currently not possible. However, we can use interpolation of placeholders.
20) What do you understand by LESS?
LESS is a dynamic style sheet producing language. It is a CSS preprocessor that extends CSS with dynamic behavior. It allows for variables, mixins, operations, and functions and runs on the server-side and client-side both.
21) What is the procedure to create a LESS file and store it and compile it?
The procedure to create and store a LESS file is similar to creating/storing a CSS file. You can create a new LESS file with a .less extension or rename the existing .css file to a .less file. You can write LESS code with existing CSS code. You should follow the best practice of creating it inside ~/content/ or ~/Styles/ folder.
22) What is the shortcut for writing @mixin and @include directives?
As a shortcut for writing @mixin and @include directives, we can use = for @mixin directive and + for @include directive. It requires less typing, makes our code simpler and easier to read, and saves our time.
23) What is the best way to represent variables in LESS?
LESS allows variables to be defined. The best way to represent variables in LESS is to represent them as @sing. While the variable assignment is done with a: (colon) sign. The values of the variables are inserted into the CSS output file as well as minified file.
24) How can you set code in a watch mode while running LESS.js in an HTML5 browser?
25) What are the different color channel functions used in LESS?
Following are some different color channel functions used in LESS:
26) What are nested rules in Sass?
Nesting is a method of combining multiple logic structures within one another. In Sass, various CSS rules are connected to one another.
For example, if you are using multiple selectors then you can use one selector inside another to create compound selectors.
27) Which one is better, Sass or Less?
Due to the following reasons, Sass is better than less:
28) What is the way to write a placeholder selector in Sass?
In Sass, the placeholder selectors can be used with class or id selector. In standard CSS, these are specified with "#" or ".", but in SASS they are replaced with "%". It uses @extend directive to display the result in CSS. For example:
29) What is the use of number operations in SASS?
In SASS, the number operations are used to allow mathematical operations such as addition, subtraction, multiplication, and division.
30) What is the use of color operations in SASS?
In SASS, the color operations allow using color components along with arithmetic operations.
31) What is the use of Boolean operations in SASS?
In SASS, the Boolean operations allow using "AND", "OR" and "NOT" operators.
32) What are parentheses in Sass?
Parentheses are used to provide a symbolic logic that affects the order of the operation. It is a pair of signs which are usually marked off by round () brackets or square  brackets.
33) Define the use of Sass Mixin function?
The Mixin function is used to define styles. Functions and Mixins are very similar. You can re-use this style throughout the style sheet. To re-use it you do not need to resort the non-semantic classes like .float-left. The Mixin can store multiple values or parameters and call a function to avoid writing repetitive codes. It names can use underscores and hyphens interchangeably.
34) What is the use of DRY-ing out a Mixin function in Sass?
DDRY-ing out a Mixin function splits into two parts: the static part and dynamic parts.
The static Mixin contains the pieces of information that would otherwise get duplicated and the dynamic Mixin is the function that the user going to call.
35) Describe the difference between Sass comment and regular CSS comment?
Comments in regular CSS starts with /* */ and Sass contains two commands. The single line comment with // and multiple CSS comments with /* */.
36) Which directive is used to detect the errors in SASS?
Sass @debug directive is used to detect the errors and display the Sass Script expressions values to the standard error output stream. For example:
37) What are the requirements of SASS system?
These are the requirements for Sass system:-
38) What is the use of @extend directive in SASS?
The SASS @extend directive is used to share a set of CSS properties from one selector to another. It is a very important and useful feature of Sass. It allows classes to share a set of properties with one another. It makes your code less and facilitates you to rewrite it repeatedly. For example:
39) What is the role of @media directive in SASS?
The Sass @media directive is used to set style rules to different media types. It supports and extends the @media rules. This directive can be nested inside the selector SASS but the main impact is displayed to the top level of the style sheet. For example:-
40) What is the use of at-root directive in SASS?
The Sass @at-root directive is a collection of nested rules that are used to style block at the root of the document. For example:-