ADVERTISEMENT
ADVERTISEMENT

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 _____.

  1. Scripting language
  2. Markup language
  3. CSS pre-processor
  4. None of the above

Answer: C) CSS pre-processor

Explanation:

Sass is a CSS pre-processor.


2. Sass stands for ______.

  1. Syntactically Awesome Stylesheet
  2. Semantically Awesome Stylesheet
  3. Simple Awesome Stylesheet
  4. Syntax-based Awesome Stylesheet

Answer: A) Syntactically Awesome Stylesheet

Explanation:

Sass stands for Syntactically Awesome Stylesheet.


3. Which symbol is used to declare a variable in Sass?

  1. #
  2. &
  3. @
  4. $

Answer: D) $

Explanation:

The symbol $ is used to declare a variable in Sass.


4. Which is the correct syntax to declare a variable "myfonts" assigning the two font names?

  1. $myfonts: Helvetica, sans-serif;
  2. $myfonts: Helvetica, and sans-serif;
  3. $myfonts: "Helvetica, sans-serif";
  4. $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;

5. Which directive allows you to include the content of one file in another?

  1. @include
  2. @define
  3. @import
  4. All of the above

Answer: C) @import

Explanation:

The @import directive allows you to include the content of one file in another.


6. What is the correct syntax for @import directive?

  1. @import -filename;
  2. @import +filename;
  3. @import filename
  4. @import filename;

Answer: D) @import filename;

Explanation:

The correct syntax for @import directive is,

@import filename;

7. While importing the Sass file, does file's extension is required?

  1. Yes
  2. 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.


8. Which directive is used to create CSS code that is to be reused throughout the website?

  1. @import
  2. @mixin
  3. @define
  4. 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.


9. Which is the correct syntax to define a mixin?

  1. @mixin name {
      property: value;
      property: value;
      ...
    }
  2. @import mixin name {
      property: value;
      property: value;
      ...
    }
  3. @mixin name .sass{
      property: value;
      property: value;
      ...
    }
  4. @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;
  ...
}

10. Which directive is used to include a mixin?

  1. @import
  2. @mixin
  3. @define
  4. All of the above

Answer: A) @import

Explanation:

The @include directive is used to include a mixin.

Syntax:

selector {
  @include mixin-name;
}

11. Can a mixin include other mixins?

  1. Yes
  2. No

Answer: A) Yes

Explanation:

Yes, a mixin can also include other mixins.

selector {
  @include mixin-name;
}

12. What is the correct syntax to pass two variables in a mixin?

  1. @mixin mixin_name(@include $variable1, @include $variable2) { properties: values;}
  2. @mixin mixin_name($variable1+$variable2) { properties: values;}
  3. @mixin mixin_name($variable1, $variable2) { properties: values;}
  4. @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;}

13. What is the correct syntax to call a mixin with two variables in a class?

  1. .class_name{ @include mixin_name(variabl1, variable2);}
  2. .class_name{ @include mixin_name(variabl1, variable2);}
  3. .class_name{ @include mixin_name(variabl1, variable2);}
  4. .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);
}

14. Is it possible to define default values to mixin variables?

  1. Yes
  2. No

Answer: A) Yes

Explanation:

Yes, it is possible to define default values to mixin variables.


15. What is the correct syntax to define default values to mixin variables?

  1. @mixin mixin_name($variable: default_value, $variable: default_value) {properties: values/variables;}
  2. @mixin mixin_name($variable=default_value, $variable=default_value) {properties: values/variables;}
  3. @mixin mixin_name($variable-default_value, $variable-default_value) {properties: values/variables;}
  4. 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;
}

16. Which directive is used to share a set of CSS properties from one selector to another?

  1. @share
  2. @import
  3. @transfer
  4. @extend

Answer: D) @extend

Explanation:

The @extend directive is used to share a set of CSS properties from one selector to another.


17. Which Sass function is used to add quotes to a string?

  1. quote(string)
  2. include(string)
  3. push(string)
  4. add(string)

Answer: A) quote(string)

Explanation:

The quote(string) function is used to add quotes to a string.

Example:

quote(IncludeHelp)
Result: "IncludeHelp"

18. Which Sass function is used to get the index of the first occurrence of the substring within string?

  1. index(string, substring)
  2. strindex(string, substring)
  3. str-index(string, substring)
  4. 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

19. Which Sass function is used to get the string with insert inserted at the specified index position?

  1. insert(string, insert, index)
  2. str-insert(string, insert, index)
  3. string-insert(string, insert, index)
  4. 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"

20. Which Sass function is used to get the length of the string?

  1. stringlength(string)
  2. length(string)
  3. str-length(string)
  4. 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

21. Which Sass function is used to extract the characters from the given string?

  1. str-slice(string, start, end)
  2. slice(string, start, end)
  3. stringslice(string, start, end)
  4. 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"

22. Which Sass function is used to convert the string to the lowercase?

  1. str-lower(string)
  2. str-lwr(string)
  3. str-lower-case(string)
  4. 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"

23. Which Sass function is used to convert the string to the uppercase?

  1. str-upper(string)
  2. str-upr(string)
  3. str-upper-case(string)
  4. 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"

24. Which Sass function is used to get the unique randomly generated unquoted string?

  1. unique-id()
  2. random-id()
  3. random()
  4. 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

25. Which Sass function is used to remove quotes around string (if any)?

  1. unquotes(string)
  2. unquote(string)
  3. rem-quote(string)
  4. 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

26. Which Sass function is used to get the absolute value of the number?

  1. abs(number)
  2. num-abs(number)
  3. absolute(number)
  4. 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

27. Which Sass function is used to round number up to the nearest integer?

  1. ceil(number)
  2. num-ceil(number)
  3. getceil(number)
  4. 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

28. Which Sass function is used to check whether two values are comparable or not?

  1. compare(num1, num2)
  2. equal(num1, num2)
  3. checkequal(num1, num2)
  4. 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

29. Which Sass function is used to round number down to the nearest integer?

  1. floor(number)
  2. getfloor(number)
  3. round(number)
  4. 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

30. Which Sass function is used to get the maximum value from the given numbers?

  1. maximum(number...)
  2. getmax(number...)
  3. max(number...)
  4. 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

31. Which Sass function is used to get the minimum value from the given numbers?

  1. minimum(number...)
  2. getmin(number...)
  3. min(number...)
  4. 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

32. Which Sass function is used to convert a number to a percentage?

  1. percentage(number)
  2. perc(number)
  3. getpercentage(number)
  4. 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

33. Which Sass function is used to get the random number between 0 and 1?

  1. random(0,1)
  2. random()
  3. randomize()
  4. 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

34. Which Sass function is used to get the random number between 1 and the given number?

  1. random(number)
  2. random(0,number)
  3. randomize(0,number)
  4. 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

35. Which Sass function is used to round the given number to the nearest integer?

  1. random(number)
  2. random(0,number)
  3. randomize(0,number)
  4. 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

36. Which is the correct syntax of append() function?

  1. append(list, [separator])
  2. append(value)
  3. append(list, value, [separator])
  4. 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])

37. Which Sass function is used to get the index position for the value in list?

  1. get-index(list, value)
  2. getindex(list, value)
  3. list-index(list, value)
  4. 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

38. Which Sass function is used to check whether the list square brackets or not?

  1. check-bracket(list)
  2. check-brackets(list)
  3. is-bracketed(list)
  4. 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

39. Which Sass function is used to check whether the list square brackets or not?

  1. check-bracket(list)
  2. check-brackets(list)
  3. is-bracketed(list)
  4. 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

40. Which Sass function is used to get the length of the list?

  1. length(list)
  2. elements(list)
  3. count(list)
  4. 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

41. Which Sass function is used to get the separator used in the list?

  1. separator(list)
  2. get-separator(list)
  3. is-separator(list)
  4. 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 

42. Which Sass function is used to get the Nth elements from the list?

  1. nth(list, n)
  2. element(list, n)
  3. list-element(list, n)
  4. 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

43. Which Sass function is used to get the value for the specified key in the map?

  1. get(map, key)
  2. map-element(map, key)
  3. map-value(map, key)
  4. 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

44. Which Sass function is used to get the list of all values in map?

  1. values(map)
  2. map-values(map)
  3. map-elements(map)
  4. 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

45. Which Sass function is used check whether the super selector matches all the elements that sub matches?

  1. is-superselector(super, sub)
  2. superselector(super, sub)
  3. sub-superselector(super, sub)
  4. 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


ADVERTISEMENT


ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.