SASS Interview Questions and Answers

What is SASS?

Sass stands for syntactically awesome style sheets. It is a css preprocessor which is used to avoid repetition with css and save time. It allows us to add variables, nested rules, mixins, inline imports, partial files, inheritance and more.

What are the benefits of using SASS?

You can write css easily and fast, and they are easy to maintain.

It is a preprocessing 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

It is more powerful and stable css extension and style documents more clearly and structurally

It has reusability methods, logic statements and some of the built-in functions like color manipulation, mathematics, and parameter lists item.

What are the features of SASS?

  • It is more state, powerful and fully compatible to css3.
  • It is time saving as it facilitates you to write CSS in less code.
  • It is based on the javascript and superset of css
  • It is a pre processor that interprets into CSS
  • It allows to write functions

which data types sass script supports?

  • Boolean
  • Number
  • Strings
  • Colors
  • Null
  • List of values, separated by space or commas
  • Maps from one value to another

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.

How to define a variable in SASS?

A variable begins with $ sign and the assignment of the variable is completed with a semicolon.

What is the difference between scss and sass?

sass contains two types of syntax.

Scss is the first syntax and it uses the extension of .scss which is very easy to write. Scss resembles more to CSS. Any CSS valid document can be converted to sass by simply changing the extension from CSS to SCSS.

Indented syntax or Sass is the other syntax and it uses the extension of .sass where you write the syntax without curly braces and semicolons which is confusing.

What is 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. You can reuse it by passing multiple values or parameters and call function to avoid writing repetitive codes.

Which directive is used to detect the errors in SASS?

@debug directive is used to detect the errors and display the sass script expressions values to the standard error output stream.

What is @import function used in SASS?

Extends the css import rule by enabling import of scss and sass files.

All imported files are merged into a single outputted css file.

What is the use of @extend directive in SASS?

The SASS @extend directive is used to share a set of css properties from once selector to another. It is very important and useful feature of SASS. It allows a class to share a set of properties with one another. @extend prevents code bloat by grouping selectors that share the same style into one rule.

Is it possible to nest variables within variables in SASS?

Interpolation of variable names is not possible in SASS. However you may use interpolation of placeholders.

What is the use of @media directive in SASS?

The SASS @media directive is ued to set style rules to different media types. It supports and extends the @media rules.

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.