SASS Interview Questions And Answers – All Are Updated

1) What is SASS?

  • The sass is the acronym of synthetically Awesome Style Sheet. This is a CSS pre-processor.
  • The sass used to minimize the repetition of CSS style tags and save time. This is a more stable extension language of CSS.
  • The file name and extension are filename.scss and filename.sass for sass.
  • The Sass is suitable for all versions of CSS.
  • To understanding Sass, the developer should know the HTML and CSS languages.

2) Who is the father of SASS?

  • The SASS language primarily designed by Hampton Catlin and developed by Natalie Weizenbaum.
  • After the primary version, Natalie Weizenbaum and Chris Eppstein are continuing for SASS with a scripting language called SaasScript.
  • The SASS language comes on 28 November 2006.

3) Enlist few features of SASS?

The Sass is time-saving and minimizes the coding language.

Some basic features of SASS which come daily basis is below.

List and @each directive together.

The list is an initial feature of sass but @each and list come together then it’s working perfectly.

Partials and @import directive.

The nested code is more complicated with multiple classes. If you want to available only required code then code separated into small size of code

@content directive.

The @content directive passes the information and content of @include to the @mixin directive.

%placeholders

This is used when the main styles don’t want to use for some places and want to modify this style.

Reference symbol ( & )

The reference symbol removes the complexion of multiple classes. The one class can refer to the parent class using & symbol.

Functions.

This is used for letters, numbers, and string as color, size, and upper-case, lower-case, etc. Interpolation.

4) List some alternative of SASS?

Some Alternative list of SASS

  • BOOTSTRAP
  • LESS
  • NODE-SASS
  • POSTCSS
  • COMPASS
  • Animate.css
  • STYLED-COMPO
  • STYLUS

5) How many syntax’s that sass support?

The Sass has supported two syntaxes which are Indented (sass) and scss.

  • Indented (sass) syntax:

The semicolon and curly bracket remove and add a colon before every property tag.

classname
:color pink
:font-size 12px

  • scss syntax:

The scss syntax is the same as a CSS syntax with its own modification.

classname{
Color: pink;
font-size: 12px;}

Example:- how to convert the SASS file and SCSS file

  • To convert the SASS file to the SCSS file.

sass-convert filename.sass filename.scss

  • To convert the SCSS file to the SASS file.

sass-convert filename.scss filename.sass

6) How to define a variable in SASS?

We can define a variable in sass

  • The variable means to store all types of values and data like Boolean, String, numeric, etc.
  • This variable value can use after time as per requirement.
  • The SASS variable syntax is below.

$variable_name: variable_value;

  • example of SASS variable

$simple: blue;
$primary:5px;
.p{
Background-color:$simple;
}
.h1{
color: $simple;
font-size: $primary;
}

7) What is use of @import function in Sass?

Let’s see the what’s the use of @import function of Saas

  • The CSS has also the @import directive but it takes extra HTTP request every single time.
  • The SASS @import directive removes the drawback of the CSS file.
  • The @import directive permits one sass file to access the content of another sass file.
  • The syntax of the import of SASS is below.

@import “file_name”;

  • We can need to write an extension (.scss) with the file name. The @import can access the automatic extension.
  • The sass file is myApp.scss show the below.

.myapp{
$ptod:grey;
$ppot:5px;
}
The another file is myCode.scss show the below.
@import myApp
.mycode{
}

8) What are nested rules in SASS?

  • The SASS created a nested style to overcome the repetitive code.
  • The one style tag can include other style tags. The sass combines outer and inner style tags.
  • You can see the detail below.

my style.scss

v{
form{
color:green;
}
ul{
border:black;
}

myStyle.css

nav form{
color:green;
}
nav ul{
border:black;
}

  • The sass selector separates using comma (,) and combines the multiple outer and inner selector automatically.

myStyle1.scss

av , .pack{
form, ul {
color:green;
border:black;
}

myStyle1.css

.nav form, .nav ul, .pack form, .pack ul {
color: green;
border:black;
}

  • The sass combinator is used when two selectors want to combine for style.

myStyle2.scss

av > {
form{
color:green;
}
}

myStyle2.css

nav >form{
color:green;
}

9) What is use of @if directive in SASS?

  • The @if is condition directive of sassScript.
  • If the condition can fulfill then style tag is working.
  • The syntax of the @if directive in sass is below.

@if expression/condition { CSS code }

  • The example is below.

@if 7>6 { color: yellow;}

  • If the condition used to control the statement and after condition becomes true then code will run.

10) Which directive displays an error message in SASS?

  • The @debug directive can display the error message in SASS.
  • This directive detects the error in the code then displays the error in the format of sassScript expression.

myStyle2.scss

prim: yellow
$sec: 2px black solid;
.container{
@debug $prime;
@debug $sec;
}

form{
color:green;
background-color:$prim;
border:$sec;
}

11) How many output styles are there in sass?

The sass file converted into CSS file automatically, but some condition CSS file is not supported.

The Sass supports four output style.

  • Compact output style: this is pointed on selector not property. It takes less space than an expanded and nested output style.
  • Compressed output style: it provides whitespace to separate selectors. It takes less space than the other three styles.
  • Expanded output style: this style to space then the default output tag. Each property expanded CSS style.
  • Nested output style: this is the default sass output style.

12) Which directive is used to import files in SASS?

  • The @import directive permits one sass file to import another sass file to access the content one file.
  • The syntax of the import of SASS is below.

@import “file_name”;

13) What are Mixins in sass?

  • The mixin is used to write the code of CSS and used throughout the websites and web application.
  • Mixin includes multiple CSS variables, values, and functions and used repeatedly in web applications.
  • This is time-saving and avoids code rewriting in CSS.
  • The mixin defines with the @mixin directive.

14) Which symbol is used to refer parent selector in sass?

The sass avoids the rewrite code using the nesting method. To refer the parent selector and inside of parent selector & (Amperes) symbol is required. This symbol used for hover, focus and active status in style tag.

Example in scss

nav{
form{
color:green;
}
&:focus {
color: yellow;
}

Example in css

nav form{
color:green;
}
nav:focus {
color: yellow;
}

15) How comfortable are you with Sass?

We know the prerequisite language as HTML, CSS with SASS style. I can work on Sass daily as a UI/UX designer and I am confident about my knowledge to work fast and minimum corrections. I rate for myself the basis of saas technology 8/10.

Leave a Comment

Your email address will not be published. Required fields are marked *