SASS Sass 3 — Questions and Answers
Question 1: What is the result of the Sass expression 10px + 5?
- 15px (Correct answer)
- 10px5
- Error
- 15
Correct answer: 15px
Sass adds the numbers and keeps the unit, producing 15px.
Question 2: Which directive lets a selector inherit the styles of another selector?
- @extend (Correct answer)
- @include
- @use
- @mixin
Correct answer: @extend
@extend shares a set of CSS properties from one selector to another.
Question 3: What type of selector is created with the % symbol in Sass?
- A placeholder selector (Correct answer)
- A percentage value
- An attribute selector
- A pseudo-element
Correct answer: A placeholder selector
Placeholder selectors (e.g. %message) are only output when extended.
Question 4: Which control directive in Sass repeats output a set number of times?
- @for (Correct answer)
- @if
- @function
- @content
Correct answer: @for
@for loops through a range, useful for generating numbered classes.
Question 5: What does the @if directive provide in Sass?
- Conditional logic in stylesheets (Correct answer)
- File importing
- Variable interpolation
- Nesting of media queries
Correct answer: Conditional logic in stylesheets
@if evaluates a condition and outputs styles only when it is true.
Question 6: How do you insert a variable's value inside a string or selector name in Sass?
- Interpolation with #{ } (Correct answer)
- Wrapping in quotes
- Using the + operator
- Using @content
Correct answer: Interpolation with #{ }
Interpolation #{$var} embeds a variable value into selectors, properties, or strings.
Question 7: Which loop directive iterates over each item in a list or map?
- @each (Correct answer)
- @for
- @while
- @repeat
Correct answer: @each
@each iterates through each element of a list or each pair of a map.
SASS Sass 3
What is the result of the Sass expression 10px + 5?