Home / Interview / Sass :: General Questions

Interview :: Sass

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.

SASS Interview Questions
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) 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:

  • "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. 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?
  • 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 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
  • It is the super set of the CSS and using nested and others value.