SASS Mixins and Functions 2 — Questions and Answers
Question 1: What is a default argument in a Sass mixin?
- A parameter with a fallback value used when no argument is passed (Correct answer)
- The first argument in the list
- An argument that is always required
- An argument passed via `!default`
Correct answer: A parameter with a fallback value used when no argument is passed
Default arguments are defined with `$param: default-value` and used when the caller omits that argument.
Question 2: What does `@content` do inside a Sass mixin?
- Inserts a content block passed from the `@include` call (Correct answer)
- Outputs the mixin name as CSS
- Includes another partial
- Renders a placeholder selector
Correct answer: Inserts a content block passed from the `@include` call
`@content` is a placeholder inside a mixin that is replaced by the block of styles provided at the `@include` site.
Question 3: Which built-in Sass function darkens a color by a given percentage?
- darken($color, $amount) (Correct answer)
- color.darken($color, $amount)
- shade($color, $amount)
- dim($color, $amount)
Correct answer: darken($color, $amount)
The `darken()` function reduces a color's lightness by the specified percentage amount.
Question 4: How do you call a Sass function with a named argument?
- function-name($param-name: value) (Correct answer)
- function-name(param-name = value)
- function-name[param: value]
- function-name{param: value}
Correct answer: function-name($param-name: value)
Named arguments use `$param-name: value` syntax, allowing arguments to be passed in any order.
Question 5: What does the `rgba()` function do in Sass?
- Creates a color with red, green, blue, and alpha channels (Correct answer)
- Converts a hex color to RGB
- Returns the alpha value of a color
- Blends two colors together
Correct answer: Creates a color with red, green, blue, and alpha channels
The `rgba()` function in Sass creates a color value with specified red, green, blue, and alpha (opacity) components.
Question 6: What is the output of `percentage(0.5)` in Sass?
- 50% (Correct answer)
- 0.5%
- 5%
- 500%
Correct answer: 50%
The `percentage()` function multiplies a unitless number by 100 and appends `%`, so 0.5 becomes 50%.
SASS Mixins and Functions 2
What is a default argument in a Sass mixin?