Google News
logo
Sass Interview Questions
When you run the LESS.js in an HTML5 browser, it uses local storage to cache the generated CSS. However, the developers cannot see the changes they made instantly. In order to see the changes you made instantly, you can load program in development and watch mode by using following JavaScript :
<script type= "text/javascript">  
   less.env = "development " ;  
   less.watch () ;  
</script>
  
<script type= "text/javascript">  
   less.env = "development " ;  
   less.watch () ;  
</script>​

 

  
There are two types of mixin arguments : 
 
Keyword Arguments : It is used to include arguments in the mixins. The arguments which are named can be passed in any order and the default values of argument can be omitted.
 
Variable Arguments : Variable arguments are used to pass any number of arguments to mixin. It contains keyword arguments passed to the function or mixin.
DDRY-ing out a Mixin function splits into two parts : the static part and dynamic parts.
 
The static Mixin contains the pieces of information that would otherwise get duplicated and the dynamic Mixin is the function that the user going to call.
The @error is used to display the SassScript expression value as fatal error and @debug detects the errors and displays the SassScript expression values to the standard error output stream.
Pros :
* Sass is easy to learn especially for them who has a background of Python, Ruby or Coffescript and place using functions, writing mixins
* CSS can be easily converted to Sass
* Throughout the project, you don’t have to repeat similar CSS statements using @extend attribute
* It allows to define variables that are usable throughout the entire project
* It keeps your responsive project more organized

Cons :
* Requires time to learn new features of preprocessor before using
* You may not be able to use the built-in element inspector feature of the browser
* Troubleshooting can be difficult
* red
* green
* blue
*
hue
* saturation
* hsvhue
* saturation
* hswalue
* alpha
* luma
* luminance
The Sass @media directive is used to set style rules to different media types. It supports and extends the @media rules. This directive can be nested inside the selector SASS but the main impact is displayed to the top level of the style sheet. For example :
 
h2{    
    color: red;    
   }    
.style{    
    width: 450px;    
      @media screen and (orientation: portrait){    
         width:180px;    
         margin-left: 90px;    
      }    
}​

 

   
The Sass @at-root directive is a collection of nested rules that are used to style block at the root of the document.

For example :
 
 h2{    
   color: blue;    
    background-color: pink;    
   @at-root {    
         .style{    
             font-size: 20px;    
             font-style: bold;    
             color: violet;    
         }    
    }    
}

 

The SASS @extend directive is used to share a set of CSS properties from one selector to another. It is a very important and useful feature of Sass. It allows classes to share a set of properties with one another. It makes your code less and facilitates you to rewrite it repeatedly.

For example :
 .message    
  border: 1px solid #ccc    
  padding: 10px    
  color: #333    
.success    
  @extend .message    
  border-color: green    
.error    
  @extend .message    
  border-color: red    
.warning    
  @extend .message    
  border-color: yellow 

 

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

For example :
$font-sizes: 10px + 20px;    
   $style: (    
     color: #bdc3c7    
   );    
.container{    
    @debug $style;    
    @debug $font-sizes;    
 }