Register Login

SASS Interview Questions and Answers

Updated Oct 03, 2019

What is Sass?

Sass or Syntactically Awesome Style Sheets is a CSS extension with special features like variables, nested rules, mixins, inline imports, and other built-in functions that help to manipulate colours and other values. It also has a completely CSS-compatible syntax.

What are some key features of Sass?

Some key features of Sass are:

  • Compatible with CSS, SASS is more stable and powerful.
  • It is based on JavaScript.
  • It is easier to read things more clearly in Sass.
  • It has an own set of the syntax that can be compiled into CSS.
  • It is easy and less time consuming to write CSS code.
  • Sass is an open-source pre-processor that CSS can interpret.

What is less?

Less or Leaner Style Sheets is a CSS extension for backwards-compatible language. Less is an open-source dynamic style sheet language that runs on the client-side or server-side and is cross-browser compatible. It allows a user to modify, manage and reuse style sheets for any webpage.

What is the difference between Sass and Less?

The difference between Sass and Less are:

Sass

Less

Sass is based in Ruby.

Less is based on JavaScript. However, it was constructed in Ruby.

To assign variables, Sass uses a dollar ($) sign.

To assign variables Less uses an at (@) sign.

Less user-friendly documentation.

More user-friendly documentation.

The error message and the ability to report syntax errors are not as good as Less.

Better error message and ability to report syntax errors.

To integrate mixin, Sass uses the extension Compass.

To integrate mixin, Less uses the extension Preboot.less.

How to use Sass in HTML?

The following is an example of the use of Sass in HTML:

ul {
  list-style: none;
  li {
    padding: 15px;
    display: inline-block;
    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }
  }
}

How to compile Sass to CSS?

The steps to compile Sass to CSS are-

  • In CSS editor open demo-styles.scss
  • Write the CSS code and save it in the file demo-styles.scss.
  • Re-check the CMD for successful compilation.

How to save Sass file?

The steps to save a Sass file are-

  • Generate a /Demo folder.
  • Create a subfolder /scss within the folder.
  • Generate a .scss file within the sub-folder
  • Check the CMD for the /Demo folder.

What are the Syntaxes supported by Sass?

The syntaxes supported by Sass are-

  • SCSS (Sassy CSS) syntax
  • Indented syntax

What are the types of functions are there in Sass?

The types of functions in Sass are-

  • String Functions
  • Numeric Functions
  • List Functions
  • Map Functions
  • Selector Functions
  • Introspection Functions
  • Colour Functions

Which symbol is used to represent placeholder in Sass?

To represent placeholders, Sass uses the percent ( % ) symbol.

Which symbol is used to refer parent selector in Sass?

In Sass, the reference to parent selector is made using the ampersand (&) symbol.

How to use font-face in Sass?

To use font face in Sass, @font-face is used.

Which command is used to detect the changes that are made to Sass file?

To detect changes in the Sass file, the --watch command is used.

What are the ways in which Sass can be used?

Sass can be used as a:

  • Command Line Tool
  • Standalone Ruby Module
  • Plug-In For Rack-Enabled Framework

What is a compass in sass? How to use a compass in Sass?

In Sass, Compass is an open-source CSS Authoring Framework that helps Sass designers to write smarter style sheets with powerful frameworks. It makes styling the web using Sass a smooth and efficient process.

The uses of Compass in Sass are:

  • Make cleaner markup without the use of presentational classes.
  • Use high-quality reusable patterns.
  • Easily create sprites.
  • Compass mixins simplify CSS3.
  • It allows designers to generate gorgeous typographic rhythms.
  • Download and make extensions easily.

What is the @extend directive?

@extend directive shares the rules and relationships between different selectors to extend the class styles in a single class and also apply its own particular style.

What is the @media directive?

@media directive is a set of style rules for the different types of media.

What is @at-root directive?

The @at-root directive is a set of nested rules that can style block at the root of a document.

What is the @import directive?

@import directive directly uses a filename to import a file and combine the imported files in one CSS file.

What is @debug directive?

@debug directive can detect an error and return the expression value of a SassScript in the standard error output stream.

What is the @error directive?

The @error directive is used to display the expression value of a SassScript as a fatal error.

What is @warn directive?

@warn directive warns the compiler with a cautionary message to the developed but also permits the compiler to finish the present job as well as write the CSS.

How many output styles are there in SASS?

The output styles in Sass are-

  • Nested
  • Expanded
  • Compact
  • Compressed

How Sass comments differ from regular CSS comments?

The difference between Sass comment and CSS comments are-

  • Sass comments are more flexible than CSS comments
  • /* */ are used in CSS to denote a multiline comment whereas // are used in Sass to denote a multiline comment.


×