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.

• You can write codes easily and efficiently, and they are easy to maintain.
• It is a pre-processing language which provides its syntax for CSS.
• It is a superset of CSS which contains all the features of CSS and is an open source pre-processor, coded in Ruby.
• It is more stable and powerful CSS extension and style documents more clearly and structurally.
• It facilitates reusability methods, logic statements and some of the built-in functions like color manipulation, mathematics, and parameter lists item.

4) 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.

5) What are the most attractive features of SASS?

• It is more stable, powerful and fully compatible to CSS3.
• It is time-saving because it facilitates you to write CSS in less code.
• It uses its syntax.
• It is based on the JavaScript and superset of CSS.
• It is an Open source pre-processor that interprets into CSS.
• It contains various functions for manipulating colors and other values.
• It has advanced control directives for libraries.
• It provides well formatted, customizable output.

6) Which data types does the Sass Script supports?

Following data types are supported by the Sass Script:

• Boolean (true or false)
• Number (1, 5, 13, 10px)
• Nulls
• Colors (red, #FF0000)
• Text String, without quote ("foo", "bar")
• List of values that are separated by commas or space (2.0em, Verdana, Arial, Helvetica)
• Maps from one value to another value (key 1: value 1, key 2: value 2)
• Function reference.

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:

• SASS is like a CSS preprocessor. It has the extension of CSS3. SASS is derived from another preprocessor known as Haml (HTML abstraction markup language).
• SASS contains two types of syntax: "SCSS" is the first syntax, and it uses the extension of .scss. Indented syntax or "SASS" is the other syntax, and it uses the extension of .sass
• You can covert the valid CSS document into SASS by simply change the extension from .CSS to .SCSS.
• SCSS is fully CSS compatible. It provides CSS-friendly syntax to closing the gap between SASS and CSS. SCSS is called Sassy CSS.

9) Explain the use of Sass @import function?

• It facilitates you to extend the CSS import rule. To do this you need to enable import of Sass and SCSS files.
• It can merge the all the imported files into a single outputted CSS file.
• It is used to virtually match and mix any file.
• It needs a filename to import function.
• It provides document style presentation better than flat CSS.
• It facilitates you to keep your responsive design project more organized.

10) What are the main advantages of SASS?

Following is a list of main advantages of SASS:

• It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work efficiently and quickly.
• It contains fewer codes, so it is time-efficient and saves time.
• It facilitates writing clean CSS in a programming construct.
• It is compatible with all versions of CSS.
• It is the superset of CSS that helps designers and developers work more efficiently and quickly.
• SASS is compatible with all versions of CSS. So, it facilitates us to use any available CSS libraries.
• It facilitates us to use nested syntax and useful functions such as color manipulation, mathematics, and other values.

11) What are the main disadvantages of SASS?

Following is a list of main disadvantages of SASS:

• SASS introduces some new features, which may take time for developers to learn these new features present in this preprocessor.
• There may be chances of losing the benefits of the browser's built-in element inspector while using SASS.
• If a team working on the same site, then they will use the same preprocessor. If some people of the team use the SASS and some people use the CSS to edit the files directly, it will become difficult to work with the site.
• In SASS, the code has to be compiled.
• The troubleshooting is difficult in 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?

When you run the LESS.js in an HTML5 browser, it uses local storage to cache the generated CSS. However, the developers cannot see the changes they made instantly. In order to see the changes you made instantly, you can load program in development and watch mode by using following JavaScript:

25) What are the different color channel functions used in LESS?

Following are some different color channel functions used in LESS:

• hue
• saturation
• hsvhue
• saturation
• hswalue
• red
• green
• blue
• alpha
• luma
• luminance

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:

• Sass provides the facilities to use logical statements like loops, conditions and also facilitates you to write reusable methods.
• The user of Sass can access the library of the company. Sass users can also use some awesome features like cross-browser support, legacy browser hacks, and dynamic sprite map generation.
• Compass also provides the facilities to add an external framework like Bootstrap on top, Blueprint.
• Sass provides you the facility to write your handy functions

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:-