1) What is Sass? Explain
SASS stands for Syntactically Awesome Style Sheets. SASS is the extension of the CSS which describes the document in a structured format. SASS provides more powerful syntax than CSS.
2) Why to use SASS?
- It is pre-processing language which provides indented syntax (its own syntax) for CSS.
- It allows writing code more efficiently and easy to maintain.
- It is super set of CSS which contains all the features of CSS and is an open source pre-processor, coded in Ruby.
- It provides document style in good structure format than flat CSS.
- It uses re-usable methods, logic statements and some of the built in functions such as color manipulation, mathematics and parameter lists.
3) Who introduced SASS?
SASS (Syntactically Awesome Style Sheets) was developed by Natalie Weizenbaum and it was designed by Hampton Catlin.
4) List out some features of SASS?
- It is more stable, powerful and compatible with versions of CSS.
- It is super set of CSS and is based on the JavaScript.
- It is known as syntactic sugar for CSS which means it makes easier way for user to read or express the things more clearly.
- It uses its own syntax and compiles to readable CSS.
- You can easily write CSS in less code within less time.
- It is an open source pre-processor which is interpreted into CSS.
5) List out the Data Types that SassScript supports?
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))
6) Explain how to define a variable in Sass?
Variables in Sass begin with a ($) sign and variable assignment is done with a colon(:).
7) What Selector Nesting in Sass is used for?
In Sass, selector nesting offers a way for stylesheet authors to compute long selectors by nesting shorter selectors within each other.
8) What is the difference between Sass and CSS? Explain
| S.no | CSS | SASS |
|---|---|---|
| 1. | Codes are Long | Code is Short |
| 2. | Unstructured Document | Structured Document |
| 3. | Nesting:-Code Block are not Nested | Nesting:- Allow the nested code to be included in each other |
| 4. | Suitable for small web applications | Suitable for small web applications as well as large user interfaces |
| 5. | Offers less flexibility | Has an ability to add mixin, functions, variable etc |
| 6. | Multiple stylesheets cannot be joined | Multiple Stylesheets can be joined into only one Style Sheet |
| 7. | Darken and Lighting Functions are not available | Darken and Lighting Functions are available |
| 8. | Mathematical functions are not available | Mathematical functions are available |
9) Explain @if directive?
@if directive <and its other companions like @else if, @else allows the code to run only if the conditions are met
Example
@if <Boolean expression> {
<statements>
}
10) Explain what is LESS?
LESS is dynamic style sheet producing language. LESS is a CSS pre-processors and extends CSS with dynamic behaviour. It allows for variables, mixins, operations and functions. LESS runs on server side and client side both.
11) Explain how to create LESS file and where to store it and compile it?
Creating or storing LESS file is similar to creating/storing CSS file. A new LESS file can be created with a .less extension, or you can rename existing .css file to .less file. You can write LESS code with existing CSS code.
The best way of creating it inside ~/content/ or ~/Styles/ folder
12) In what ways LESS can be used?
- Via npm LESS can be used on the command line
- Download as a script file for the browser
- For third party tools, it is used
13) How variable is represented in LESS?
LESS allows variables to be defined. In LESS, the variable is represented as @sing. While, variable assignment is done with a: (colon) sing. The values of the variables are inserted into the CSS output file as well as minified file.
14) List out the differences between LESS and Sass?
Each style-sheet language is good in their perspective and use; however there are few differences in their usage.
| LESS | Sass |
| – LESS uses JavaScript and processed at client-side | – Sass is coded in Ruby and thus processed to server-side |
| – Variable names are prefaced with the @symbol | – Variable name are prefaced with $ symbol |
| – LESS does not inherit multiple selectors with one set of properties | – Sass inherits multiple selectors with one set of properties |
| – LESS does not work with “unknown” units neither it returns syntax error notification for incompatible units or maths related syntax error | – Sass allows you to work with “unknown” units also returns a syntax error notification for incompatible units |
15) What are the similarities between LESS and Sass?
Between LESS and Sass the similarities are
- Namespaces
- Color functions
- Mixins and parametric mixins
- Nesting capabilities
- JavaScript evaluations
