Home »
MCQs
SASS Multiple-Choice Questions (MCQs)
Sass stands for "Syntactically Awesome StyleSheet". Sass is a CSS pre-processor which is used to reduce repetition of CSS and therefore saves time.
SASS MCQs: This section contains SASS Multiple-Choice Questions with Answers. These SASS MCQs are written for beginners as well as advanced, practice these MCQs to enhance and test the knowledge of SASS.
List of SASS MCQs
1. Sass is a _____.
- Scripting language
- Markup language
- CSS pre-processor
- None of the above
Answer: C) CSS pre-processor
Explanation:
Sass is a CSS pre-processor.
Discuss this Question
2. Sass stands for ______.
- Syntactically Awesome Stylesheet
- Semantically Awesome Stylesheet
- Simple Awesome Stylesheet
- Syntax-based Awesome Stylesheet
Answer: A) Syntactically Awesome Stylesheet
Explanation:
Sass stands for Syntactically Awesome Stylesheet.
Discuss this Question
3. Which symbol is used to declare a variable in Sass?
- #
- &
- @
- $
Answer: D) $
Explanation:
The symbol $ is used to declare a variable in Sass.
Discuss this Question
4. Which is the correct syntax to declare a variable "myfonts" assigning the two font names?
- $myfonts: Helvetica, sans-serif;
- $myfonts: Helvetica, and sans-serif;
- $myfonts: "Helvetica, sans-serif";
- $myfonts: "Helvetica+sans-serif";
Answer: A) $myfonts: Helvetica, sans-serif;
Explanation:
The correct syntax to declare a variable "myfonts" assigning the two font names is,
$myfonts: Helvetica, sans-serif;
Discuss this Question
5. Which directive allows you to include the content of one file in another?
- @include
- @define
- @import
- All of the above
Answer: C) @import
Explanation:
The @import directive allows you to include the content of one file in another.
Discuss this Question
6. What is the correct syntax for @import directive?
- @import -filename;
- @import +filename;
- @import filename
- @import filename;
Answer: D) @import filename;
Explanation:
The correct syntax for @import directive is,
@import filename;
Discuss this Question
7. While importing the Sass file, does file's extension is required?
- Yes
- No
Answer: B) No
Explanation:
There is no need to specify a file extension, Sass automatically assumes that you mean a .sass or .scss file.
Discuss this Question
8. Which directive is used to create CSS code that is to be reused throughout the website?
- @import
- @mixin
- @define
- All of the above
Answer: B) @mixin
Explanation:
The @mixin directive is used to create CSS code that is to be reused throughout the website.
Discuss this Question
9. Which is the correct syntax to define a mixin?
-
@mixin name {
property: value;
property: value;
...
}
-
@import mixin name {
property: value;
property: value;
...
}
-
@mixin name .sass{
property: value;
property: value;
...
}
-
@mixin name {
@import _filename;
}
Answer: A)
@mixin name {
property: value;
property: value;
...
}
Explanation:
The correct syntax to define a mixin is:
@mixin name {
property: value;
property: value;
...
}
Discuss this Question
10. Which directive is used to include a mixin?
- @import
- @mixin
- @define
- All of the above
Answer: A) @import
Explanation:
The @include directive is used to include a mixin.
Syntax:
selector {
@include mixin-name;
}
Discuss this Question
11. Can a mixin include other mixins?
- Yes
- No
Answer: A) Yes
Explanation:
Yes, a mixin can also include other mixins.
selector {
@include mixin-name;
}
Discuss this Question
12. What is the correct syntax to pass two variables in a mixin?
- @mixin mixin_name(@include $variable1, @include $variable2) { properties: values;}
- @mixin mixin_name($variable1+$variable2) { properties: values;}
- @mixin mixin_name($variable1, $variable2) { properties: values;}
- @import @mixin mixin_name($variable1, $variable2) { properties: values;}
Answer: C) @mixin mixin_name($variable1, $variable2) { properties: values;}
Explanation:
The correct syntax to pass two variables in a mixin is,
@mixin mixin_name($variable1, $variable2) { properties:values;}
Discuss this Question
13. What is the correct syntax to call a mixin with two variables in a class?
- .class_name{ @include mixin_name(variabl1, variable2);}
- .class_name{ @include mixin_name(variabl1, variable2);}
- .class_name{ @include mixin_name(variabl1, variable2);}
- .class_name{ @include mixin_name(variabl1, variable2);}
Answer: A) .class_name{ @include mixin_name(variabl1, variable2);}
Explanation:
The correct syntax to call a mixin in a class is,
.class_name{ @include mixin_name(variabl1, variable2);}
Example:
.post{
@include border1(red, 1px);
}
Discuss this Question
14. Is it possible to define default values to mixin variables?
- Yes
- No
Answer: A) Yes
Explanation:
Yes, it is possible to define default values to mixin variables.
Discuss this Question
15. What is the correct syntax to define default values to mixin variables?
- @mixin mixin_name($variable: default_value, $variable: default_value) {properties: values/variables;}
- @mixin mixin_name($variable=default_value, $variable=default_value) {properties: values/variables;}
- @mixin mixin_name($variable-default_value, $variable-default_value) {properties: values/variables;}
- All of the above
Answer: A) @mixin mixin_name($variable: default_value, $variable: default_value) {properties: values/variables;}
Explanation:
The correct syntax to define default values to mixin variables is,
@mixin mixin_name($variable=default_value, $variable=default_value) {properties: values/variables;}
Example:
@mixin post($color: red, $width: 2px) {
border: $width solid $color;
}
Discuss this Question
16. Which directive is used to share a set of CSS properties from one selector to another?
- @share
- @import
- @transfer
- @extend
Answer: D) @extend
Explanation:
The @extend directive is used to share a set of CSS properties from one selector to another.
Discuss this Question
17. Which Sass function is used to add quotes to a string?
- quote(string)
- include(string)
- push(string)
- add(string)
Answer: A) quote(string)
Explanation:
The quote(string) function is used to add quotes to a string.
Example:
quote(IncludeHelp)
Result: "IncludeHelp"
Discuss this Question
18. Which Sass function is used to get the index of the first occurrence of the substring within string?
- index(string, substring)
- strindex(string, substring)
- str-index(string, substring)
- get (string, substring)
Answer: C) str-index(string, substring)
Explanation:
The str-index(string, substring) function is used to get the index of the first occurrence of the substring within string.
Example:
str-index("IncludeHelp", "n")
Result: 2
Discuss this Question
19. Which Sass function is used to get the string with insert inserted at the specified index position?
- insert(string, insert, index)
- str-insert(string, insert, index)
- string-insert(string, insert, index)
- strinsert(string, insert, index)
Answer: B) str-insert(string, insert, index)
Explanation:
The str-insert(string, insert, index) function is used to get the string with insert inserted at the specified index position.
Example:
str-insert("IncludeHelp", " Hello ", 1)
Result: "Hello IncludeHelp"
Discuss this Question
20. Which Sass function is used to get the length of the string?
- stringlength(string)
- length(string)
- str-length(string)
- len(string)
Answer: C) str-length(string)
Explanation:
The str-length(string) function is used to get the length of the string.
Example:
str-length("IncludeHelp")
Result: 11
Discuss this Question
21. Which Sass function is used to extract the characters from the given string?
- str-slice(string, start, end)
- slice(string, start, end)
- stringslice(string, start, end)
- str-extract(string, start, end)
Answer: A) str-slice(string, start, end)
Explanation:
The str-slice(string, start, end) function is used to extract the characters from the given string.
Example:
str-slice("IncludeHelp", 3, 5)
Result: "clude"
Discuss this Question
22. Which Sass function is used to convert the string to the lowercase?
- str-lower(string)
- str-lwr(string)
- str-lower-case(string)
- to-lower-case(string)
Answer: D) to-lower-case(string)
Explanation:
The to-lower-case(string) function is used to convert the string to the lowercase.
Example:
to-lower-case("IncludeHelp")
Result: "includehelp"
Discuss this Question
23. Which Sass function is used to convert the string to the uppercase?
- str-upper(string)
- str-upr(string)
- str-upper-case(string)
- to-upper-case(string)
Answer: D) to-upper-case(string)
Explanation:
The to-upper-case(string) function is used to convert the string to the uppercase.
Example:
to-upper-case("IncludeHelp")
Result: "INCLUDEHELP"
Discuss this Question
24. Which Sass function is used to get the unique randomly generated unquoted string?
- unique-id()
- random-id()
- random()
- unique()
Answer: A) unique-id()
Explanation:
The unique-id() function is used to get the unique randomly generated unquoted string.
Example:
unique-id()
Result: syghxfrav
Discuss this Question
25. Which Sass function is used to remove quotes around string (if any)?
- unquotes(string)
- unquote(string)
- rem-quote(string)
- rem-quotes(string)
Answer: B) unquote(string)
Explanation:
The unquote(string) function is used to remove quotes around string (if any).
Example:
unquote("IncludeHelp")
Result: IncludeHelp
Discuss this Question
26. Which Sass function is used to get the absolute value of the number?
- abs(number)
- num-abs(number)
- absolute(number)
- getabs(number)
Answer: A) abs(number)
Explanation:
The abs(number) function is used to get the absolute value of the number.
Example:
abs(-108)
Result: 108
Discuss this Question
27. Which Sass function is used to round number up to the nearest integer?
- ceil(number)
- num-ceil(number)
- getceil(number)
- ceiling(number)
Answer: A) ceil(number)
Explanation:
The ceil(number) function is used to round number up to the nearest integer.
Example:
abs(107.20)
Result: 108
Discuss this Question
28. Which Sass function is used to check whether two values are comparable or not?
- compare(num1, num2)
- equal(num1, num2)
- checkequal(num1, num2)
- comparable(num1, num2)
Answer: D) comparable(num1, num2)
Explanation:
The comparable(num1, num2) function is used to check whether two values are comparable or not.
Example:
comparable(35px, 15px)
Result: true
comparable(201mm, 108cm)
Result: true
comparable(15px, 1.5em)
Result: false
Discuss this Question
29. Which Sass function is used to round number down to the nearest integer?
- floor(number)
- getfloor(number)
- round(number)
- rounddown(number)
Answer: A) floor(number)
Explanation:
The floor(number) function is used to round number down to the nearest integer.
Example:
floor(107.76)
Result: 108
Discuss this Question
30. Which Sass function is used to get the maximum value from the given numbers?
- maximum(number...)
- getmax(number...)
- max(number...)
- maxvalue(number...)
Answer: C) max(number...)
Explanation:
The max(number...) function is used to get the maximum value from the given number.
Example:
max(15,1 7, 90, 0, -3)
Result: 90
Discuss this Question
31. Which Sass function is used to get the minimum value from the given numbers?
- minimum(number...)
- getmin(number...)
- min(number...)
- minvalue(number...)
Answer: C) min(number...)
Explanation:
The min(number...) function is used to get the minimum value from the given number.
Example:
max(15,1 7, 90, 0, -3)
Result: -3
Discuss this Question
32. Which Sass function is used to convert a number to a percentage?
- percentage(number)
- perc(number)
- getpercentage(number)
- getperc(number)
Answer: A) percentage(number)
Explanation:
The percentage(number) function is used to convert a number to a percentage.
Example:
percentage(4.5)
Result: 450
Discuss this Question
33. Which Sass function is used to get the random number between 0 and 1?
- random(0,1)
- random()
- randomize()
- random-number()
Answer: B) random()
Explanation:
The random() function is used to get the random number between 0 and 1.
Example:
random()
Result: 0.12389
Discuss this Question
34. Which Sass function is used to get the random number between 1 and the given number?
- random(number)
- random(0,number)
- randomize(0,number)
- random-number(number)
Answer: A) random(number)
Explanation:
The random(number) function is used to get the random number between 1 and the given number.
Example:
random(108)
Result: 54
Discuss this Question
35. Which Sass function is used to round the given number to the nearest integer?
- random(number)
- random(0,number)
- randomize(0,number)
- random-number(number)
Answer: A) random(number)
Explanation:
The random(number) function is used to round the given number to the nearest integer.
Example:
round(108.20)
Result: 108
round(108.80)
Result: 109
Discuss this Question
36. Which is the correct syntax of append() function?
- append(list, [separator])
- append(value)
- append(list, value, [separator])
- append-to-list(list, value, [separator])
Answer: C) append(list, value, [separator])
Explanation:
The correct syntax to add a single value in a list is,
append(list, value, [separator])
Discuss this Question
37. Which Sass function is used to get the index position for the value in list?
- get-index(list, value)
- getindex(list, value)
- list-index(list, value)
- index(list, value)
Answer: D) index(list, value)
Explanation:
The index(list, value) function is used to get the index position for the value in list.
Example:
index(a d c, d)
Result: 2
Discuss this Question
38. Which Sass function is used to check whether the list square brackets or not?
- check-bracket(list)
- check-brackets(list)
- is-bracketed(list)
- is-bracketedlis(list)
Answer: C) is-bracketed(list)
Explanation:
The is-bracketed(list) function is used to check whether the list has square brackets or not.
Example:
is-bracketed([x y z])
Result: true
Discuss this Question
39. Which Sass function is used to get a new selector containing a nested list of CSS selectors based on the list provided?
- selector-nest(selectors)
- selector-parse(selector)
- selector-replace(selector, original, replacement)
- selector-unify(selector1, selector2)
Answer: A) selector-nest(selectors)
Explanation:
The selector-nest(selectors) function is used to get a new selector containing a nested list of CSS selectors based on the list provided.
Discuss this Question
40. Which Sass function is used to get the length of the list?
- length(list)
- elements(list)
- count(list)
- countelements(list)
Answer: A) length(list)
Explanation:
The length(list) function is used to get the length of the list.
Example:
is-bracketed([x y z])
Result: 3
Discuss this Question
41. Which Sass function is used to get the separator used in the list?
- separator(list)
- get-separator(list)
- is-separator(list)
- list-separator(list)
Answer: D) list-separator(list)
Explanation:
The list-separator(list) function is used to get the separator used in the list.
Example:
list-separator([x y z])
Result: space
Discuss this Question
42. Which Sass function is used to get the Nth elements from the list?
- nth(list, n)
- element(list, n)
- list-element(list, n)
- get(list, n)
Answer: A) nth(list, n)
Explanation:
The nth(list, n) function is used to get the Nth elements from the list.
Example:
nth(x y z, 2)
Result: y
Discuss this Question
43. Which Sass function is used to get the value for the specified key in the map?
- get(map, key)
- map-element(map, key)
- map-value(map, key)
- map-get(map, key)
Answer: D) map-get(map, key)
Explanation:
The nth(list, n) function is used to get the value for the specified key in the map.
Example:
$font-sizes: ("normal": 14px, "larger": 20px, "largest": 32px)
map-get($font-sizes, " largest ")
Result: 32px
Discuss this Question
44. Which Sass function is used to get the list of all values in map?
- values(map)
- map-values(map)
- map-elements(map)
- elements(map)
Answer: B) map-values(map)
Explanation:
The map-values(map) function is used to get the list of all values in map.
Example:
$font-sizes: ("normal": 14px, "larger": 20px, "largest": 32px)
map-get($font-sizes, " largest ")
Result: 14px, 20px, 32px
Discuss this Question
45. Which Sass function is used check whether the super selector matches all the elements that sub matches?
- is-superselector(super, sub)
- superselector(super, sub)
- sub-superselector(super, sub)
- map-superselector(super, sub)
Answer: A) is-superselector(super, sub)
Explanation:
The is-superselector(super, sub) function is used to check whether the super selector matches all the elements that sub matches.
Example:
is-superselector("div", "div.myvalue")
Result: true
is-superselector("div.myvalue", "div")
Result: false
Discuss this Question