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?
Hampton Catlin is 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) Which variable is used to define SASS?
A variable begins with a dollar ($) sign, and the assignment of the variable is completed with a semicolon (;) sign.
8) Explain the difference between SCSS and Sass?
The main differences between SCSS and Sass are as follow:
Sass is like a CSS pre-processor. It has the extension of CSS3. Sass is derived from another preprocessor known as Haml.
Sass contains two types of syntax:
You can covert the valid CSS document into Sass by simply change the extension from .CSS to .SCSS. It is fully CSS compatible. SCSS provides the CSS friendly syntax to closing the gap between Sass and CSS. SCSS is called Sassy CSS.
9) Explain the use of Sass @import function?
10) What are the advantages of Sass?
11) 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.
12) Which one is better, Sass or Less?
Due to the following reasons, Sass is better than less:
13) 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:
14) What are number operations in Sass?
In Sass, the number operations are used for mathematical operations like addition, subtraction, multiplication and division. The Sass number operation will do something like take pixel values and convert them to percentages without much hassle.
15) What are the color operations in Sass?
In Sass, color operation allows to use color In Sass, color operation allows to use color components along with arithmetic operations.
16) How can we perform Boolean operations in Sass?
The Boolean operations can be performed on Sass script by using and, & and not operators.
17) 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.
18) 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.
19) 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.
20) 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 /* */.
21) 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:
22) What are the requirements of SASS system?
These are the requirements for Sass system:-
23) 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:
24) 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:-
25) 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:-