Google News
logo
Sass Interview Questions
* It needs a filename to 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 provides document style presentation better than flat CSS.
* It facilitates you to keep your responsive design project more organized.

Example : 
@import "test.css";
@import "css/test.css";
@import url("http://example.com/css/test.css");

 

We can easily select the parent selector by using the & character. It specifies where we should insert the parent selector.
Sass supports standard CSS comments /* comment */, and in addition it supports inline comments // comment :
 
Sass Example : 
/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
  background-color: $primary_1; // here you can put an inline comment
}

 

There are 5 types of operations :
 
* Number Operations : It allows for mathematical operations such as addition, subtraction, multiplication and division.

* Color Operations : It allows using color components along with arithmetic operations.

* Boolean Operations : You can perform boolean operations on Sass script by using and, or and not operators.

* List Operations : Lists represent series of values which are separated using commas or space.

* String Operations
The @mixin directive is used to define the mixins that include the variables and argument optionally after the name of the mixin.
 
Sass @mixin Syntax :
@mixin name {
  property: value;
  property: value;
  ...
}

 

As a shortcut for writing @mixin and @include directives, we can use = for @mixin directive and + for @include directive. It requires less typing, makes our code simpler and easier to read, and saves our time.
In SASS, we can easily define an element in a variable and interpolate it inside the SASS code. It is useful when we keep our modules in separate files.
As the name suggests, the compressed CSS style takes the least amount of space compared to all other CSS styles. It provides whitespaces only to separate selectors and newlines at the end of the file.
LESS is a dynamic style sheet producing language. It is a CSS preprocessor that extends CSS with dynamic behavior. It allows for variables, mixins, operations, and functions and runs on the server-side and client-side both.
The procedure to create and store a LESS file is similar to creating/storing a CSS file. You can create a new LESS file with a .less extension or rename the existing .css file to a .less file. You can write LESS code with existing CSS code. You should follow the best practice of creating it inside ~/content/ or ~/Styles/ folder.