SASS Interview Questions

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

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

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.

Some Alternative list of SASS

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

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

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;
}

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{
}

• 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;
         }

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

• 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;
                   }

The SaaS 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 the 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.

• 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”;

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

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;
                 }

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.