Advanced SASS and LESS Interview Questions and Answers- webbopedia

Here we have mentioned most frequently asked SASS and LESS Interview Questions and Answers specially for freshers and experienced.

1. What is LESS?

Ans:

LESS (Leaner CSS) is a dynamic style sheet which can be run on client-side or server-side.
It is mostly designed to make CSS more manageable, customizable and reusable.
LESS is a powerful CSS extension which makes designing easier and more efficient.
It helps writing CSS simpler and object-oriented.

2. What are the features of LESS?

Ans:

LESS compiles faster than other preprocessor of CSS.
It is a clean, compact and readable code written in a well organized way.
It supports cross-browser compatibility.
It provides @import rule so you can easily handle external files. Importing is required when we have multiple style sheets.
It facilitates to define styles which can be reused throughout the code.

3. What are the disadvantages of LESS?

Ans:

LESS has a tight coupling between modules so it takes time to reuse and/or test dependent modules.
If you are new to CSS preprocessing then it takes time to learn LESS.
LESS has lesser framework compared to SASS, which consists of frameworks Compass, Gravity and Susy.

4. What is the difference between SASS and LESS?

Ans:

SASS	LESS
To run SASS, you will need to have Ruby installed.	LESS is written in JavaScript, so you will need NodeJS to run it.
To assign a variable SASS uses ‘

5. Why should we use LESS?

Ans:

LESS is an open-source written in JavaScript. It compiles and generates into a simple CSS which works across the browser and supports creating cleaner CSS faster and easier.
Less keeps your code in modular. Codes are simple and well organized as compared to CSS
Less offers list of operators that makes coding faster.
LESS has better error messages and user friendly documentation than SASS.
Less also supports Lazy Loading feature.

6. How to pre-compile LESS into CSS?

Ans:

To pre-compile LESS into CSS you can use,
Run less.js using Node.js: By using Node.js JavaScript framework, you can run less.js script outside the browser.
Use lessphp: For the implementation of the LESS compiler written in PHP, lessphp is used.
Use online compiler: Use online compiler for quick compilation of LESS code without installing a compiler.
Less. app (for Mac users): Less.app is a free tool for Mac users, this tool auto compiles them into CSS files.

7. What is the use of Extend in LESS?

Ans:

Extend is a feature of LESS.
This feature acts as a pseudo class which extends other selector styles in one selector by using :extend selector.
Extend is placed into ruleset or attached to a selector.

8. How can you create a loop structures in LESS?

Ans:

A mixin can call itself in LESS. Such recursive mixins, when combined with Pattern matching and Guard Expressions, can be used to create various iterative/loop structures.

9. Why do we need parametric mixins in LESS?

Ans:

Parametric mixins are same like standard mixins. The only difference is that parametric mixins take parameters like functions in JavaScript. After determining parameters to the mixins, you get more control over mixins.
Cons:
White space sensitive
No inline rules

10. What is Sass ?

Ans:

Answer : Sass (Syntactically Awesome Stylesheets) is a stylesheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[1][2] After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files. Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called \”the inde

11. Explain what is Sass? How it can be used?

Ans:

Sass stands for Syntactically Awesome Stylesheets and was created by Hampton Catlin. It is an extension of CSS3, adding nested rules, mixins, variables, selector inheritance, etc.
Sass can be used in three ways
As a command line tool
As a standalone Ruby module
As a plugin for any Rack-enabled framework

12. List out the key features for Sass?

Ans:

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

13. List out the Data Types that SassScript supports?

Ans:

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))

14. Explain how to define a variable in Sass?

Ans:

Variables in Sass begin with a ($) sign and variable assignment is done with a colon(:).

15. Explain what is the difference between Sass and SCSS?

Ans:

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.

16. What Selector Nesting in Sass is used for?

Ans:

In Sass, selector nesting offers a way for stylesheet authors to compute long selectors by nesting shorter selectors within each other.

17. Explain what is a @extend function used for in Sass?

Ans:

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.

18. Explain what is the use of the @IMPORT function in Sass?

Ans:

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

19. Why Sass is considered better than LESS?

Ans:

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

20. Explain what is the use of Mixin function in Sass? What is the meaning of DRY-ing out a mixin?

Ans:

Mixin allows you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left.
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.

21. Explain what Sass Maps is and what is the use of Sass Maps?

Ans:

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

22. Explain how Sass comments are different from regular CSS?

Ans:

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 /* */.

23. Does Sass support inline comments?

Ans:

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

24. How interpolation is used in Sass?

Ans:

In Sass, you can define an element in a variable and interpolate it inside the Sass code. It is useful when you keep your modules in separate files.

25. Explain when can you use the %placeholders in Sass?

Ans:

%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

26. Is it possible to nest variables within variables in Sass?

Ans:

Interpolation of variables names is not possible currently in Sass. However, you may use interpolation of placeholders.

27. What are Sass cons and pros?

Ans:

Pros:

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

28. Explain what is LESS?

Ans:

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.

29. Explain how to create LESS file and where to store it and compile it?

Ans:

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

30. In what ways LESS can be used?

Ans:

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

31. How variable is represented in LESS?

Ans:

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.

32. Explain how Mixins is useful?

Ans:

Mixins enable embedding all the properties of a class into another class by including the class name as one of its properties. It is just like variables but for whole classes.

33. Explain how can set code in a watch mode when you run LESS.js in an HTML5 browser?

Ans:

If you run LESS.js in an HTML5 browser, it will use local storage to cache the generated CSS. However, from the developer point of view they cannot see the changes they made instantly. In order to see your changes instantly.

34. Explain what is the meaning of nesting in LESS programming?

Ans:

Nesting in LESS is clustering of statements inside other statements, so it forms a group of related code. In other words when we add a code snippet and add another code inside it, then that code snippet is called nesting.

35. Mention what are the color channel functions used in LESS?

Ans:

hue
saturation
hsvhue
saturation
hswalue
red
green
blue
alpha
luma
luminance

36. Explain what is data-uri in LESS?

Ans:

In CSS, Data URI’s is one of the best technique, it allows developers to avoid external image referencing and instead embed them directly into a stylesheet. Data URIs are the excellent way to reduce HTTP requests

37. Explain what “Source Map Less Inline”?

Ans:

The “ Source Map Less Inline” option indicates that we should include all of the CSS files into the sourcemap. Which means that you only need your map file to get to your original source.

38. Explain what is the use of Extend “all” in LESS?

Ans:

When you specify all keyword last in an extend argument, it tells LESS to match that selector as part of another selector.

39. Explain what is “StrictImports” in LESS?

Ans:

The strictImports controls whether the compiler will allow a @import inside of either @media blocks or other selector blocks

40. List out the differences between LESS and Sass?

Ans:

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

41. What are the similarities between LESS and Sass?

Ans:

Between LESS and Sass the similarities are

Namespaces
Color functions
Mixins and parametric mixins
Nesting capabilities
JavaScript evaluations

42. Explain what is the use of &combinator ?

Ans:

&combinator concatenates nested selector with the parent selector. It is useful for Pseudo classes such as :hover and :focus

43. Explain what is the use of operations in LESS?

Ans:

Operations can be used for performing functions like
Simple Mathematical operators: +, – , *, /
Color functions
Math functions
Any size or colour variable can be operated upon

44. Explain what is the use of Escaping?

Ans:

The use of escaping in LESS
When you need to output CSS that is not valid CSS syntax
Proprietary syntax not recognized by LESS
LESS compiler will throw an error if not used
Simple prefix with ~ symbol and put in quotes

45. What does LESS elements contains?

Ans:

Less elements contain commonly used mixins like
.gradient
.rounded
.opacity
.box-shadow
.inner-shadow

46. List out alternatives against LESS?

Ans:

SASS: Syntactically Awesome Stylesheets
SCSS: Version.2 of SASS
Stylus

47. Explain how you can invoke the compiler from the command line?

Ans:

You can invoke the compiler from the command line in LESS as
$ lessc styles.less
This will output the compiled CSS to stdout; you may then redirect it to a file of your choice
$ lessc styles.less > styles.css

48. What is the use of e () function?

Ans:

With the help of e() function you can escape a value so that it passes straight through to the compiled CSS, without being noticed by the LESS compiler.

49. Explain how you can pre-compile LESS into CSS?

Ans:

To pre-compile LESS into CSS you can use
Run less.js using Node.js : By using the Node.js JavaScript framework you can run the less.js script outside the browser
Use lessphp: For the implementation of the LESS compiler written in PHP, lessphp is used
Use online Compiler: Use online compiler for quick compilation of LESS code without installing a compiler
Less. app (for Mac users): Less.app is a free tool for Mac users, this tool auto compiles them into CSS files

50. Explain how merge function is used in LESS?

Ans:

For aggregating values from multiple properties into a space or comma separated list under a single property LESS is used. It is useful for properties such as transform and background

51. What is SASS

Ans:

SASS means Syntactically Awesome Stylesheets as a
CSS pre-processor
is a stylesheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files.
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called the indented syntax, uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS, uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively.

52. How to define variable in SASS

Ans:

Sass allows variables to be defined. Variables begin with a Dollar sign ($). Variable assiment is done with a colon(:)
SassScript supports four data types:

Numbers(including units)
Strings (with quotes or without)
Colors (name, or names)
Boolens

Variables can be arguments to or results from one of several available function During translation, the values of the variables are inserted into the output CSS document.
In SCSS style

$blue: #3bbfce;
$margin: 16px;
.content-navigation {
 border-color: $blue;
 color:
 darken($blue, 20%);
}
.border {
 padding: $margin / 2;
 margin: $margin / 2;
 border-color: $blue;
}
Or SASS style
$blue: #3bbfce
$margin: 16px

.content-navigation
border-color: $blue
color: darken($blue, 9%)

.border
padding: $margin/2
margin: $margin/2
border-color: $blue

Would compile to:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

53. How to do Nesting in SASS

Ans:

SASS allows the nested code to be inserted within each other. where as
CSS does support logical nesting, but the code blocks themselves are not nested.

table.hl {
 margin: 2em 0;
 td.ln {
 text-align: right;
 }
}

li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}

Would compile to:
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}

li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}

54. What the use of Mixins in SASS

Ans:

CSS does not support mixins Any repeated code must be repeated in each location. A mixin is a section of code that contains any valid Sass code. Whenever a mixin is called, the result of translating the mixin is inserted at the calling location. Mixins allow for efficient and clean code repetitions, as well as easy alteration of code.

@mixin table-base {
 th {
 text-align: center;
 font-weight: bold;
 }
 td, th {padding: 2px}
}

#data {
@include table-base;
}

Would compile to:

#data th {
 text-align: center;
 font-weight: bold;
}
#data td, #data th {
 padding: 2px;
}

55. Is Mixins Support arguments ?

Ans:

Yes Mixins also support arguments

@mixin left($dist) {
 float: left;
 margin-left: $dist;
}

#data {
@include left(10px);
}

Would compile to:

#data {
 float: left;
 margin-left: 10px;
}

56. How to use Selector inheritance and multiple inheritance?

Ans:

While CSS3 supports the Document Object Model hierarchy, it does not allow selector inheritance. Inheritance is done by inserting a line inside of a code block that uses the @extend keyword and references another selector. The extended selector’s attributes are applied to the calling selector.

.error {
 border: 1px #f00;
 background: #fdd;
}
.error.intrusion {
 font-size: 1.3em;
 font-weight: bold;
}

.badError {
@extend .error;
border-width: 3px;
}

Would compile to:

.error, .badError {
 border: 1px #f00;
 background: #fdd;
}

.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}

.badError {
border-width: 3px;
}

YES Sass supports multiple inheritance

57. What is SASS?

Ans:

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes style of document cleanly and structurally.

58. Why to use SASS?

Ans:

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.

59. List out some features of SASS?

Ans:

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.

60. What are advantages of SASS?

Ans:

It allows writing clean CSS in a programming construct.
It helps in writing CSS quicker.
It is superset of CSS which helps designers and developers work more efficiently and quickly.
As Sass is compatible with all versions of CSS, we can use any available CSS libraries.
It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values.

61. What are disadvantages of SASS?

Ans:

It takes time for developer to learn new features present in this pre-processor.
If more number of people working on the same site, then will use the same preprocessor. Some people use the Sass and some people use the CSS to edit the files directly. So it will become difficult to work with site.
There are chances of losing benefits of browser’s built-in element inspector.

62. Name the two syntaxes supported by SASS?

Ans:

SASS supports two syntaxes namely SCSS and Indented syntax.
The SCSS (Sassy CSS) is an extension of CSS syntax that makes much easier to maintain large stylesheets and can recognize vendor specific syntax and many CSS. SCSS files use the extension .scss.
The Indented is an older syntax and sometimes just called as Sass. Using this form of syntax, CSS can be written concisely. SASS files use the extension .sass.

63. In how many ways you can use the SASS?

Ans:

You can use SASS in three different ways –
As a command line tool
As a Ruby module
As a plugin for Rack enable framework

64. What are nested rules in SASS?

Ans:

Nesting is combining of different logic structures. Using SASS, we can combine multiple CSS rules within one another. If you are using multiple selectors, then you can use one selector inside another to create compound selectors.

65. How to refer parent selector in the SASS?

Ans:

You can select the parent selector by using the & character. It tells where the parent selector should be inserted.

66. How to write placeholder selector in SASS?

Ans:

SASS supports placeholder selector using class or id selector. In normal CSS, these are specified with “#” or “.”, but in SASS they are replaced with “%”.

67. Mention the different types of operations on the SASS?

Ans:

There are 5 types of operations –
Number Operations
Color Operations
String Operations
Boolean Operations
List Operations

68. What are number operations?

Ans:

It allows for mathematical operations such as addition, subtraction, multiplication and division.

69. What are color operations?

Ans:

It allows using color components along with arithmetic operations.

70. What are list operations?

Ans:

Lists represent series of values which are separated using commas or space.

71. What are boolean operations?

Ans:

You can perform boolean operations on Sass script by using and, or and not operators.

72. What are parentheses in SASS?

Ans:

Parentheses is pair of signs which are usually marked off by round brackets ( ) or square brackets [] which provides symbolic logic that affect the order of operations.

73. What is interpolation in SASS?

Ans:

It provides SassScript variables in selectors and property names using #{ }syntax. You can specify variables or property names within the curly braces.

74. What is variable defaults?

Ans:

You can set default values for variables by adding !default flag to the end of the variable value. It will not re-assign the value, if it is already assigned to the variable.

75. What is import directive?

Ans:

It directly takes the filename to import and all the imported files will get combined in a single CSS file.

76. What is media directive?

Ans:

It set style rule to different media types.

77. What is extend directive?

Ans:

It is used to share rules and relationships between selectors. It can extend all another class styles in one class and can also apply its own specific styles.

78. What is at-root directive?

Ans:

It is is a collection of nested rules which is able to make style block at root of the document.

79. What is @if directive?

Ans:

It is used to selectively execute the code statements based on the result of the evaluating an expression.

80. What is @else if directive?

Ans:

The @else if statements are used with the @if directive, whenever the @if statement fails then the @else if statements are tried and if they also fails then the @else is executed.

81. What is @for directive?

Ans:

It allows you to generate styles in a loop. The counter variable is used to set the output for each iteration.

82. What is @each directive?

Ans:

In @each directive, a variable is defined which contains the value of each item in a list.

83. What is @mixin directive?

Ans:

It is used to define the mixins that includes optionally the variables and argument after the name of the mixin.

84. What is @include directive?

Ans:

It is used to include the mixin in the document and styles defined by the mixin can be included into the current rule.

85. What are mixin arguments?

Ans:

The SassScript values can be taken as arguments in mixins which are given when mixin is include and are available as variable within the mixin.

86. Mention the two types of mixin arguments?

Ans:

There are two types of mixin arguments –
Keyword Arguments
Variable Arguments

87. What are keyword arguments?

Ans:

It is used to include arguments in the mixins. The arguments which are named can be passed in any order and the default values of argument can be omitted.

88. What are variable arguments?

Ans:

Variable arguments are used to pass any number of arguments to mixin. It contains keyword arguments passed to the function or mixin.

89. What are function directive?

Ans:

Using function directive, you can create your own function and use them in your script context or can be used with any value.

90. What is SASS output style?

Ans:

The CSS file that the SASS generates consists of default CSS style which reflects the structure of document. The default CSS styling is good but might not be suitable for all situations.

91. What is nested CSS style?

Ans:

Nested style is default styling of SASS. This way of styling is very useful when you are dealing with large CSS files.

92. What is expanded CSS style?

Ans:

In expanded output styling, each property and rule has its own line. It takes more space compared to nested CSS style.

93. What is compact CSS style?

Ans:

Compact CSS style competitively takes less space than Expanded and Nested. It focuses mainly on selectors rather than its properties.

94. What is compressed CSS style?

Ans:

Compressed CSS style takes least amount of space compared to all other styles. It provides whitespaces only to separate selectors and newline at the end of the file.

95. What are key features of SASS Indented Syntax?

Ans:

It uses indentation rather than { and } to delimit blocks.
To separate statements, it uses newlines instead of semicolons(;).
Property declaration and selectors must be placed on its own line and statements within { and } must be placed on new line and indented.

96. What are key features of SASS Indented Syntax?

Ans:

97. In how many ways you can declare CSS properties?

Ans:

CSS properties can be declared in two ways –
Properties can be declared similar to CSS but without semicolon(;).
colon(:) will be prefixed to every property name.

98. What is shorthand for writing @mixin and @include directives?

Ans:

You can use = for @mixin directive and + for @include directive which requires less typing and makes your code simpler, and easier to read.

99. Which command is used to watch the file and update the CSS whenever SASS file changes?

Ans:

sass –watch C:\ruby\lib\sass\style.scss:style.css

100. What are comments in SASS?

Ans:

Comments take up entire line and enclose all the text nested under them and they are line-based in indented syntax.

101. Which command is used to run SASS code from the command line?

Ans:

sass input.scss output.css

102. What are the CSS specifications for character encoding of stylesheets?

Ans:

First it checks for Unicode byte, next @charset declaration and then Ruby string encoding.
Next if nothing is set, then it considers charset encoding as UTF-8.
Determine character encoding explicitly by using @charset declaration. Just use “@charset encoding name” at the beginning of the stylesheet and SASS will assume that this is the given character encoding.
If output file of SASS contains non ASCII characters, then it will use the @charset declaration.

103. How many types are there in comments?

Ans:

Sass supports two types of comments –
Multiline comments – These are written using /* and */. Multiline comments are preserved in CSS output.
Single line comments – These are written using // followed by comments. single line comments are not preserved in CSS output.

104. What is interactive shell?

Ans:

It evaluates SassScript expression using command line. You can run the shell with the sass command line along with -i option.

105. What is @debug directive?

Ans:

It detects the errors and display the SassScript expression values to the standard error output stream.

106. What is @error directive?

Ans:

It displays the SassScript expression value as fatal error.