SASS Interview Questions

A list of frequently asked SASS interview questions and answers are given below.

1) What is SASS?

SASS is an acronym which stands for Syntactically Awesome Stylesheets. It is a CSS preprocessor which is used to reduce repetition with CSS and save time.

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.

• You can write codes easily and efficiently and they are easy to maintain.
• It is a pre-processing language which provides its own 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.

4) How many ways SASS can be used?

SASS can be used in three ways:

• As a command line tool
• As a standalone Ruby module
• As a plugin 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 own syntax.
• It is based on the JavaScript.
• It is an Open source pre-processor which is interpreted into CSS.
• It has many useful functions for manipulating colors and other values.
• It has advance features like control directives for libraries.

6) What are the Data Types that is supported by SassScript?

SassScript supports seven main data types:

• Numbers (1, 5, 10)
• Strings of texts ("foo", "bar")
• Colors (blue, #04a3f9)
• Booleans (true or false)
• Nulls (null)
• List of values, separated by space or commas (1.5em, Arial, Helvetica)
• Maps from one value to another ( (key 1: value1, key 2: Value 2) )

7) How can you define a variable in Sass?

A variable begins with a ($) sign and variable assignment is completed with a semicolon ; sign.

8) What are the difference between Sass and SCSS?

Following are the main differences between Sass and SCSS:

Sass is a CSS pre-processor and an extension of CSS3.

Sass has two syntax:

• The first syntax is "SCSS" and it uses the .scss extension.
• The other syntax is indented syntax or just "Sass" and it uses the .sass extension.

Sass has loose syntax with white space and no semicolons while SCSS is more similar to CSS.

Any CSS valid document can be converted to Sass by simply changing the extension from .CSS to .SCSS.

9) What is the use of the @import function in Sass?

• It is used to extend 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.

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

11) What are nested rules in Sass?

Nesting is a method of combining multiple logic structures within one another. In Sass, multiple CSS rules are combined within 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?

Sass is considered better than Less because of the following reasons:

• Sass facilitates you to write reusable methods and use logic statements like loops, and conditions.
• Sass user can access Compass library and use some awesome features like dynamic sprite map generation, legacy browser hacks and cross-browser support for CSS3 features.
• Compass also allows you to add an external framework like Blueprint, Foundation or Bootstrap on top
• Sass facilitates you can write your own handy functions.

13) What is the way to write placeholder selector in Sass?

In Sass, the placeholder selectors can be used with class or id selector. In normal CSS, these are specified with "#" or ".", but in SASS they are replaced with "%".

14) What are number operations in Sass?

In Sass, the number operations are used for mathematical operations like addition, subtraction, multiplication and division.

15) What are color operations in Sass?

In Sass, color operation allows to use color components along with arithmetic operations.

16) What are 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) What is the use of Mixin function in Sass?

Mixin function facilitates you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left.

19) What is the use of DRY-ing out a Mixin function in Sass?

DRY-ing out of a mixing means splitting it into dynamic and static parts.

The dynamic mixin is the one that the user actually going to call, and the static mixin is the pieces of information that would otherwise get duplicated.

20) What is the difference between Sass comment and regular CSS comment?

The regular CSS comments start with /* comments?*/ while Sass has two type of comment. The single line comment with // and the multiple CSS comments with /* */.