Top 30 SASS Interview Questions for 2024

1) What is Sass?

SASS: Systematically Awesome Style Sheets is an extension of CSS. It is also known as CSS pre-processor which helps to reduce repetition with CSS and saves time. It is more powerful and stable CSS extension language.

2) What are the features of Sass?

The features of Sass are:

• It is superset of CSS
• It is based on JavaScript
• It uses its own syntax.
• It is an open-source pre processor
• It is more powerful, stable and elegant than CSS

3) Who is the inventor of SASS?

Hampton Catlin is the inventor of SASS.

4) What are the data types that are supported by SassScript?

Supports seven main data types are:

• Maps
• Nulls
• Colors
• Numbers
• Booleans
• List of values
• Strings of texts

5) What are the advantages of Sass?

Advantages of Sass are:

• Designers and developers work more efficiently and quickly because it is a superset of CSS
• Sass is compatible with all versions of CSS
• It is possible to use useful functions and nested syntax such as mathematics and color manipulation

6) What are number operations in Sass?

Number operations are used for mathematical operations (+,-,*, /).

7) How can we use interpolation in Sass?

We can use interpolation in Sass by using modules that contains Sass code in separate files.

8) What are the types of Operators used in Sass?

The types of Operators used in Sass are:

• Assignment Operator
• Arithmetic Operator
• Equality Operator
• Comparison Operator
• Logical Operators

9) What are the types of keywords used for @for directive?

There are two types of keywords:

• Through keyword
• To keyword

10) What is Mixins in Sass?

It allows you to make groups of CSS declarations that you want to reuse repeatedly on your site. The mixin is used to store multiple values or parameters. Its name can use underscores and hyphens interchangeably.

11) What are the types of CSS extensions used in Sass?

The types of CSS extensions used in Sass are:

• Interactive Shell
• Variables
• DataTypes
• Operations
• Parentheses
• Functions
• Interpolation
• & in SassScript
• Variable Defaults

12) What are the types of comment in Sass?

There are two types of comment in Sass:

• • Single line:

Example: //Single Line Comment.

• • Multiple line:

Example: /* Multiple Line Comment.*/

13) What is mashup in Sass?

It is an application that can display a Web page and shows data. It supports features from two or more sources.

14) What are color operations in Sass?

It allows using color components along with arithmetic operations.

15) What is the difference between Sass and LESS?

The difference between Sass and LESS are:

LESS	SASS
It uses JavaScript and processed at client-side.	It uses Ruby and processed at server-side.
@symbol is used to declare the variable name.	$symbol is used to declare the variable name.
It doesn't inherit multiple selectors with one set of properties.	It inherits multiple selectors with one set of properties.
It does not work with "unknown" units.	It works with "unknown" units.

16) What are the disadvantages of Sass?

The disadvantages of Sass are:

• The user must have enough time to learn Saas.
• Here, if you using Sass may cause of losing benefits of browser's built-in element inspector.

17) Which location Sass uses to write cache files on the file system?

cache_location is used to write cache files on the file system.

18) What is the use of @import in Sass?

Saas uses @import to import SCSS and SASS files.

19) What are the different output styles supported by Sass?

The different output styles supported by Sass are:

• Nested style
• expanded type
• Compact CSS style
• Compressed CSS style

20) What is Nested style in Sass?

Nested style: It is the default output style of Sass. It is very useful when you are dealing with large CSS files. It is used to makes the structure of the file more readable and can be easily understood.

21) What is Compact CSS style in Sass?

Compact style: It takes less space than Expanded and Nested output styles. Here, Compact CSS style focuses mainly on selectors rather than its properties.

22) Which command is used to update the CSS when we change the SASS file?

sass --watch input.scss:output.css is used to update the CSS when we change the SASS file.

23) What are the directives present in Mixins?

The following directives present in Mixins are:

• Defining a Mixin (@mixin directive is used)
• Including a Mixin (@include directive is used)
• Arguments (The SassScript values can be taken as arguments in mixins)
• Passing Content Blocks to a Mixin

24) What is the use of @mixin directive?

@mixin directive: This directive is used to define the mixin.

25) What is the use of @include directive?

@include directive: This directive is used to include a mixins in the document.

26) What are the types of control directives used in Sass?

The control directives used in Sass are:

• if()
• @if
• @for
• @each
• @while

27) What is the use of @for directive in Sass?

@for directive: It allows you to generate styles in a loop.

28) What are the different ways to use Sass?

There are three ways to use Sass:

• You can use Sass as a command line tool
• You can use Sass as a Ruby module
• You can use Sass as a plugin for Rack enable framework

29) Which command is used to check the entire directory in Sass?

The command used is: sass --watch app/sass:public/stylesheets.

30) What is SCSS in Sass?

SCSS: It is an extension of CSS syntax. It is used to maintain large stylesheets. It can recognize vendor specific syntax. In SCSS files, the extension used is .scss.