Google News
logo
Sass Interview Questions
* SASS means Syntactically Awesome Style sheets
* Sass is an extension to CSS
* Sass is a CSS pre-processor
* Sass is completely compatible with all versions of CSS
* Sass reduces repetition of CSS and therefore saves time
* Sass is free to download and use
Sass was initially designed by Hampton Catlin and developed by Natalie Weizenbaum (November 28, 2006). After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a scripting language used in Sass files.
Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.
 
Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
 
Example :
/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

 

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.
 
This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.
* It allows writing clean CSS in a programming construct.
 
* It helps in writing CSS quicker.
 
* It is superset of CSS which helps designers and developers work more efficiently and quickly.
 
* As Sass is compatible with all versions of CSS, we can use any available CSS libraries.
 
* It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values.
* It takes time for developer to learn new features present in this pre-processor.
 
* If more number of people working on the same site, then will use the same preprocessor. Some people use the Sass and some people use the CSS to edit the files directly. So it will become difficult to work with site.
 
* There are chances of losing benefits of browser's built-in element inspector.
SassScript supports seven main data types :

* Nulls (e.g; null)
* Colors (blue, #04a3f9)
* Numbers ( eg; 1,5 ,10px)
* Strings of texts ( g., “foo”, ‘bar’, etc.)
* Booleans (true or false)
* Maps from one value to another (g., ( key 1: value1, key 2: Value 2))
* List of values, separated by space or commas (g., 1.5em, Arial, Helvetica etc.)
The main differences between SCSS and SASS :
 
* SASS is like a CSS preprocessor. It has the extension of CSS3. SASS is derived from another preprocessor known as Haml (HTML abstraction markup language).

* 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.

* SCSS is fully CSS compatible. It provides CSS-friendly syntax to closing the gap between SASS and CSS. SCSS is called Sassy CSS.
Nesting is combining of different logic structures. Using SASS, we can combine multiple CSS rules within one another. If you are using multiple selectors, then you can use one selector inside another to create compound selectors.
SASS supports placeholder selector using class or id selector. In normal CSS, these are specified with "#" or ".", but in SASS they are replaced with "%".