A list of frequently asked SASS interview questions and answers are given below.
1) Define SASS?
SASS means Syntactically Awesome Style sheets. It is a CSS preprocessor which is used to reduce repetition with CSS and save time. It adds power and elegance to the basic language and facilitates you to add variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax.
2) Who is the inventor of SASS?
Hampton Catlin is known as the father of SASS.
3) What are the reasons behind using SASS?
Following are some important reasons behind the popularity of SASS.
- You can write codes easily and efficiently, and they are easy to maintain.
- It is a pre-processing language which provides its syntax for CSS.
- It is a superset of CSS which contains all the features of CSS and is an open source pre-processor, coded in Ruby.
- It is more stable and powerful CSS extension and style documents more clearly and structurally.
- It facilitates reusability methods, logic statements and some of the built-in functions like color manipulation, mathematics, and parameter lists item.
4) How many ways can we use SASS?
We can use SASS in three different ways:
- As a command line tool.
- As a standalone Ruby module.
- As a plug-in for any Rack-enabled framework.
5) What are the most attractive features of SASS?
- It is more stable, powerful and fully compatible to CSS3.
- It is time-saving because it facilitates you to write CSS in less code.
- It uses its syntax.
- It is based on the JavaScript and superset of CSS.
- It is an Open source pre-processor that interprets into CSS.
- It contains various functions for manipulating colors and other values.
- It has advanced control directives for libraries.
- It provides well formatted, customizable output.
6) Which data types does the Sass Script supports?
Following data types are supported by the Sass Script:
- Boolean (true or false)
- Number (1, 5, 13, 10px)
- Nulls
- Colors (red, #FF0000)
- Text String, without quote ("foo", "bar")
- List of values that are separated by commas or space (2.0em, Verdana, Arial, Helvetica)
- Maps from one value to another value (key 1: value 1, key 2: value 2)
- Function reference.
SASS always supports all other types of CSS property value such as Unicode range, special character, and unquoted string.
7) Which variable is used to define SASS?
A variable begins with a dollar ($) sign, and the assignment of the variable is completed with a semicolon (;) sign.
8) Explain the difference between SCSS and Sass?
The main differences between SCSS and Sass are as follow:
Sass is like a CSS pre-processor. It has the extension of CSS3. Sass is derived from another preprocessor known as Haml.
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. It is fully CSS compatible. SCSS provides the CSS friendly syntax to closing the gap between Sass and CSS. SCSS is called Sassy CSS.
9) Explain the use of Sass @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 needs a filename to import function.
- It provides document style presentation better than flat CSS.
- It facilitates you to keep your responsive design project more organized.
10) What are the advantages of Sass?
- Time saving.
- More efficient and quicker.
- Compatible with all versions of CSS.
- You can use nested syntax and useful functions such as color manipulation, mathematics and other values.
- Write clean CSS in programming construct
- It is the super set of the CSS and using nested and others value.
11) What are nested rules in Sass?
Nesting is a method of combining multiple logic structures within one another. In Sass, various CSS rules are connected to one another.
For example, if you are using multiple selectors then you can use one selector inside another to create compound selectors.
12) Which one is better, Sass or Less?
Due to the following reasons, Sass is better than less:
- Sass provides the facilities to use logical statements like loops, conditions and also facilitates you to write reusable methods.
- The user of Sass can access the library of the company. Sass users can also use some awesome features like cross-browser support, legacy browser hacks, and dynamic sprite map generation.
- Compass also provides the facilities to add an external framework like Bootstrap on top, Blueprint.
- Sass provides you the facility to write your handy functions
13) What is the way to write a placeholder selector in Sass?
In Sass, the placeholder selectors can be used with class or id selector. In standard CSS, these are specified with "#" or ".", but in SASS they are replaced with "%". It uses @extend directive to display the result in CSS. For example:
14) What are number operations in Sass?
In Sass, the number operations are used for mathematical operations like addition, subtraction, multiplication and division. The Sass number operation will do something like take pixel values and convert them to percentages without much hassle.
15) What are the color operations in Sass?
In Sass, color operation allows to use color In Sass, color operation allows to use color components along with arithmetic operations.
16) How can we perform Boolean operations in Sass?
The Boolean operations can be performed on Sass script by using and, & and not operators.
17) What are parentheses in Sass?
Parentheses are used to provide a symbolic logic that affects the order of the operation. It is a pair of signs which are usually marked off by round () brackets or square [] brackets.
18) Define the use of Sass Mixin function?
The Mixin function is used to define styles. Functions and Mixins are very similar. You can re-use this style throughout the style sheet. To re-use it you do not need to resort the non-semantic classes like .float-left. The Mixin can store multiple values or parameters and call a function to avoid writing repetitive codes. It names can use underscores and hyphens interchangeably.
19) What is the use of DRY-ing out a Mixin function in Sass?
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.
20) Describe the difference between Sass comment and regular CSS comment?
Comments in regular CSS starts with /* */ and Sass contains two commands. The single line comment with // and multiple CSS comments with /* */.
21) Which directive is used to detect the errors in SASS?
Sass @debug directive is used to detect the errors and display the Sass Script expressions values to the standard error output stream. For example:
22) What are the requirements of SASS system?
These are the requirements for Sass system:-
23) What is the use of @extend directive in SASS?
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:
24) What is the role of @media directive in SASS?
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:-
25) What is the use of at-root directive in SASS?
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:-
No comments:
Post a Comment