sass : Interview Questions
The SASS is useful in reducing the usage of CSS which will reduce the time and saves the code that in turn increases code reusability and reduces code redundancy. It provides own syntax for the CSS provides in developing more efficient code. SASS is a superset of CSS which is easier to use and it contains all the features of CSS.
This is the common SASS Interview Questions asked in an interview. CSS is Cascading Style Sheets whereas SASS is Syntactically Awesome Style Sheets and SASS is a superset of CSS and it contains all the features of CSS. SASS is a CSS pre-processor that will allow using the different operations and using variables, mixins, functions, imports and different kinds of loops. Any types of variables can be declared, defined and used. It will use nested syntax.
A Variable in SASS is used to store the information which can be reused throughout the style sheet. A variable will be defined by starting it with a dollar ($) sign. To use the different types of colors, these variables will be useful to make them consistent across the application. Below are the examples for the definition of the variables. Here font is a variable that is started with a dollar sign and is defined as TimesNewRoman and the other variable is color which is also started with a dollar sign.
The different types of operations used in SASS are Number Operations List Operations String Operations Color Operations and Boolean Operations. Number Operations involves operations such as addition, subtraction, multiplication, and division. List Operations involve operations such as a set of values that are separated by commas in the form of an array. String Operations involve operations such as concatenation or splitting the strings. Color Operations involves operations such as using the Color components with arithmetic operations and finally, Boolean Operations involves operations such as using AND, OR, NOT operators to perform Boolean operations on SassScript.
A Mixin in SASS is a SASS Mixin which is called as CSS functions. Mixins can be used and included wherever they are needed in. A few functionalities in CSS which are difficult to implement can be done using Mixins. Values can also be passed to Mixins in case they are required. This will provide more reusability.
SassScript provides different types of mechanisms in CSS such as Nesting, Variables, Mixins, Selector Inheritance, etc., SassScript is a set of small extensions which will be used by SASS. This can also be used with property names and selectors while being used with mixins.
The different types of Mixin arguments are Value Arguments and Keyword Arguments. The arguments can be SassScript values in the case of Mixins. These can be passed to Mixins and they will be available as variables in the Mixin and can be used within the scope of Mixin. Variable arguments are used to pass any number of arguments to Mixin. The keyword arguments passed to the Mixin can be accessed by using Keywords.
The different features in SASS are Reference Symbol, Partials and Directives, Interpolation, Placeholders, Functions, Lists, etc. It will also super style the CSS by providing different functionalities to ease the development and provide code reusability. Variables, Nesting, and Math are also available in the SASS. The different CSS files can be easily combined by using an import directive. The different types of styles can be reused with Mixins. A mixin is a great feature where the code chunks will be reused easily without any code duplications. The styles can be extended with Inheritance.
Interpolation also called as Variable Substitution or Variable Interpolation which is defined as interpolating an expression or a variable. This is a process of a String or an expression containing more than one variable where these variables will be replaced in the memory with their corresponding values. Interpolation will have syntax to be used in the SASS.
SASS will allow writing clean CSS code and avoids code redundancy. SASS is a superset of CSS which will help the developers in writing the code more efficiently and quickly. SASS is also compatible with different kinds of CSS versions and any available CSS libraries can be used. It has a powerful syntax which will help in writing the short and efficient code. The disadvantages of CSS are that it will have more learning curve for the developers to learn all the features involved in SASS. The number of developers using the same scripts will have an impact if one has modified for their requirement and will impact this in the case of development.
Key features for Sass include
- Full CSS3-compatible
- Language extensions such as nesting, variables, and mixins
- Many useful functions for manipulating colors and other values
- Advanced features like control directives for libraries
- Well-formatted, customizable output
SassScript supports seven main data types
- Numbers ( eg; 1,5 ,10px)
- Strings of texts ( g., “foo”, ‘bar’, etc.)
- Colors (blue, #04a3f9)
- Booleans (true or false)
- Nulls (e.g; null)
- List of values, separated by space or commas (g., 1.5em, Arial, Helvetica etc.)
- Maps from one value to another (g., ( key 1: value1, key 2: Value 2))
The difference between Sass and SCSS is that,
- Sass is a CSS pre-processor with syntax advancements and an extension of CSS3
- Sass has two syntax
- The first syntax is “SCSS” and it uses the .scss extension
- The other syntax is indented syntax or just “Sass” and it uses the .sass extension
- While Sass has loose syntax with white space and no semicolons, the SCSS resembles more to CSS
Any CSS valid document can be converted to Sass by simply changing the extension from.CSS to.SCSS.
In Sass, selector nesting offers a way for stylesheet authors to compute long selectors by nesting shorter selectors within each other.
In Sass, the @EXTEND directive provides a simple way to allow a selector to inherit the styles of another one. It aims at providing a way for a selector A to extend the styles from a selector B. When doing so, the selector A will be added to selector B so they both share the same declarations. @EXTEND prevents code bloat by grouping selectors that share the same style into one rule.
The @IMPORT function in Sass
- Extends the CSS import rule by enabling import of SCSS and Sass files
- All imported files are merged into a single outputted CSS file
- Can virtually mix and match any file and be certain of all your styles
- @IMPORT takes a filename to import
- Saas allows you to write reusable methods and use logic statements, e., loops, and conditionals
- Saas user can access Compass library and use some awesome features like dynamic sprite map generation, legacy browser hacks and cross-browser support for CSS3 features
- Compass also allows you to add an external framework like Blueprint, Foundation or Bootstrap on top
- In LESS, you can write a basic logic statement using a ‘guarded mixin’, which is equivalent to Sass if statements
- In LESS, you can loop through numeric values using recursive functions while Sass allows you to iterate any kind of data
- In Sass, you can write your own handy functions
DRY-ing out of a mixing means splitting it into dynamic and static parts. The dynamic mixin is the one that the user actually going to call, and the static mixin is the pieces of information that would otherwise get duplicated.
Sass map is a structured data in a hierarchical way and not just a bunch of variables. It can help in organizing the code. Some great use of Sass are
- It is very useful when dealing with layers of elements in your project
- It can be helpful in color management when there is long list of different color and shade
- Use icon map for various social media icons for example: facebook: ‘\e607’ or twitter: ‘\e602’
- Unlike other programming libraries, Sass map will consist only of code that is going to be used
Syntax for comments in regular CSS starts with /* comments…*/, while in SASS there are two type of comment, the single line comments // and the multiline CSS comments with /* */.
Single line comments // will be removed by the .scss pre-processor and won’t appear in your .css file
While the comment */ are valid CSS, and will be preserved between the translation from .scss to your .css file
%placeholders in Sass is useful when you want to write styles that were meant to be extended, but you don’t want the base styles to be seen in output CSS styles
Interpolation of variables names is not possible currently in Sass. However, you may use interpolation of placeholders.
- 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