Interview :: 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.
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
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:
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.
In Sass, color operation allows to use color In Sass, color operation allows to use color components along with arithmetic operations.
The Boolean operations can be performed on Sass script by using and, & and not operators.
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.
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.
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.
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 /* */.