SASS (Syntactically Awesome Style Sheets) Certificate Exam — Questions and Answers

Question 1: How do you use the `if()` function (inline conditional) in Sass?

if($condition, $true-value, $false-value) (Correct answer)
@if $condition { value } @else { value }
switch($condition, $true, $false)
condition ? true-value : false-value

Correct answer: if($condition, $true-value, $false-value)

The `if()` function is a ternary-style built-in that returns the second or third argument based on the condition.

Question 2: What does the `&` symbol represent in Sass nesting?

A universal selector
A child combinator
An ID selector
The parent selector (Correct answer)

Correct answer: The parent selector

In Sass, `&` refers to the parent selector and is used to create compound selectors or pseudo-classes.

Question 3: What does `@forward` do in Sass?

Imports and immediately outputs a partial
Forwards styles to a child selector
Re-exports members of one module so they are accessible from another file (Correct answer)
Passes arguments to a mixin

Correct answer: Re-exports members of one module so they are accessible from another file

`@forward` makes a module's members available when another file uses the forwarding module.

Question 4: What is the difference between `@extend` and `@include` in practice?

They produce identical CSS output
`@include` is newer than `@extend`
`@extend` works in functions; `@include` does not
`@extend` outputs grouped selectors; `@include` duplicates declarations at each use site (Correct answer)

Correct answer: `@extend` outputs grouped selectors; `@include` duplicates declarations at each use site

`@extend` groups selectors for shared styles (no duplication), while `@include` copies the mixin's styles into every use site, potentially duplicating declarations.

Question 5: How do you multiply a color channel value using Sass?

Use `multiply($color, 2)`
Use `$color * 2`
Use `color.scale()` or `color.adjust()` for channel manipulation (Correct answer)
Use `@color-multiply`

Correct answer: Use `color.scale()` or `color.adjust()` for channel manipulation

Direct multiplication of color values is not standard; use `color.scale()` or `color.adjust()` to modify specific channels.

Question 6: What does `meta.function-exists('function-name')` return?

The file where the function is defined
True if the function exists, false otherwise (Correct answer)
The number of parameters the function accepts
The function definition

Correct answer: True if the function exists, false otherwise

`meta.function-exists()` returns a boolean indicating whether a function with the given name is defined and accessible in the current scope.

Question 7: How do you define a mixin in Sass?

@mixin name { } (Correct answer)
@include name { }
@define name { }
@create name { }

Correct answer: @mixin name { }

Mixins are defined using the `@mixin` directive followed by the mixin name and a block of styles.

Question 8: How do you call a Sass function with a named argument?

function-name{param: value}
function-name(param-name = value)
function-name($param-name: value) (Correct answer)
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 9: Which built-in Sass function darkens a color by a given percentage?

shade($color, $amount)
dim($color, $amount)
darken($color, $amount) (Correct answer)
color.darken($color, $amount)

Correct answer: darken($color, $amount)

The `darken()` function reduces a color's lightness by the specified percentage amount.

Question 10: How do you pass a content block to a mixin in Sass?

@mixin mixin-name { /* styles */ }
@include mixin-name { /* styles */ } (Correct answer)
@include mixin-name => { /* styles */ }
@include mixin-name(@content { /* styles */ })

Correct answer: @include mixin-name { /* styles */ }

A content block is passed by placing styles in curly braces after the `@include` call.

Question 11: What happens if you `@use` the same file twice in Sass?

The second `@use` is silently ignored and a warning is shown
An error is thrown
The file is loaded once; subsequent uses reference the same module (Correct answer)
The file is loaded and executed twice

Correct answer: The file is loaded once; subsequent uses reference the same module

Sass's module system ensures each file is loaded and executed only once, even if `@use`d multiple times, preventing duplication.

Question 12: Which arithmetic operators does Sass support?

+, -, *, /, % (Correct answer)
add, sub, mul, div
+, -, ×, ÷
+, -, *, **, //

Correct answer: +, -, *, /, %

Sass supports addition, subtraction, multiplication, division, and modulo in arithmetic expressions.

Question 13: How do you iterate over a list in Sass?

@for $item of $list { }
@each $item in $list { } (Correct answer)
@iterate $item in $list { }
@loop $item from $list { }

Correct answer: @each $item in $list { }

The `@each` directive iterates over every item in a list or map, assigning each to the loop variable.

Question 14: Which Sass function increases the opacity of a color?

lighten()
transparentize() / fade-out()
opacify() / fade-in() (Correct answer)
rgba() with a lower value

Correct answer: opacify() / fade-in()

`opacify($color, $amount)` (aliased as `fade-in()`) increases the alpha value of a color by the specified amount, making it less transparent.

Question 15: How do you use the built-in Sass color module?

@include sass-color;
@import 'color';
@use 'sass:colors';
@use 'sass:color'; (Correct answer)

Correct answer: @use 'sass:color';

The `sass:color` built-in module is loaded with `@use 'sass:color'` and provides color manipulation functions.

Question 16: Which Sass built-in module provides the `list.join()` function?

sass:list (Correct answer)
sass:array
sass:collections
sass:core

Correct answer: sass:list

The `sass:list` module provides list manipulation functions including `list.join()`, `list.append()`, and `list.index()`.

Question 17: What does `@use 'file' as *` do in Sass?

Imports all members into the global namespace (no prefix) (Correct answer)
Loads all files in the directory
Exports all members from the current file
Makes all members private

Correct answer: Imports all members into the global namespace (no prefix)

Using `as *` loads all public members into the global namespace without a prefix, similar to the old `@import` behavior.

Question 18: True/False: The SASS code is run from the command line using the "sass input.scss output.css" command.

B) True (Correct answer)
A) False

Correct answer: B) True

This statement is true. The `sass` command-line interface (CLI) is the standard way to compile Sass files into CSS. The command `sass input.scss output.css` instructs the Sass compiler to read the Sass code from `input.scss` and generate the corresponding standard CSS output into `output.css`.

Question 19: How do you merge two Sass maps into one?

$map1 + $map2
map.combine($map1, $map2)
map.merge($map1, $map2) (Correct answer)
merge-maps($map1, $map2)

Correct answer: map.merge($map1, $map2)

The `map.merge()` function combines two maps, with the second map's keys overriding the first on conflicts.

Question 20: What is the main disadvantage of `@extend`?

It can generate unexpected selector combinations in complex stylesheets (Correct answer)
It only works with placeholder selectors
It doesn't work with class selectors
It cannot be used inside media queries

Correct answer: It can generate unexpected selector combinations in complex stylesheets

`@extend` propagates across all instances of the extended selector, which can create surprising and unintended selector combinations in large stylesheets.

Question 21: What does `@debug` do in Sass?

Logs the compiled CSS
Prints a value to the standard error output during compilation (Correct answer)
Adds a CSS comment in the output
Pauses compilation for inspection

Correct answer: Prints a value to the standard error output during compilation

`@debug` outputs a message to the Sass compiler's error stream, useful for inspecting variable values.

Question 22: Which Sass function checks if a map has a specific key?

map.has-key() (Correct answer)
map.exists()
map.contains()
map.check()

Correct answer: map.has-key()

The `map.has-key($map, $key)` function returns `true` if the map contains the specified key.

Question 23: What does the `@extend` directive do in Sass?

Shares styles by adding the extending selector to the extended selector's rule (Correct answer)
Copies all the styles of a selector into another selector
Creates a new CSS class with merged properties
Imports another file's styles

Correct answer: Shares styles by adding the extending selector to the extended selector's rule

`@extend` adds the extending selector to the existing CSS rule, so both selectors share the same styles without duplicating declarations.

Question 24: How do you use `@each` to iterate over a Sass map?

@for $key: $value in $map { }
@each $key, $value in $map { } (Correct answer)
@each $entry in $map { }
@map-each $key $value in $map { }

Correct answer: @each $key, $value in $map { }

When iterating a map with `@each`, you can destructure key-value pairs using `$key, $value` syntax.

Question 25: What is the result of `not true` in a Sass `@if` condition?

0
true
null
false (Correct answer)

Correct answer: false

The `not` operator negates a boolean value, so `not true` evaluates to `false` in Sass.

Question 26: Why is `@import` deprecated in modern Sass?

It is slower than `@use`
It does not support variables
It pollutes the global scope and can cause duplicate output (Correct answer)
It only works with CSS files

Correct answer: It pollutes the global scope and can cause duplicate output

`@import` makes all variables, mixins, and functions global, leading to conflicts and repeated file loading.

Question 27: Which keyword sets a default value for a Sass variable only if it is not already defined?

!global
!default (Correct answer)
!important
!optional

Correct answer: !default

The !default flag assigns a value only when the variable is unset or null.

Question 28: Which built-in Sass module provides string manipulation functions?

sass:string (Correct answer)
sass:strings
sass:text
sass:str

Correct answer: sass:string

The `sass:string` module provides functions like `string.quote()`, `string.unquote()`, and `string.index()`.

Question 29: What is a common use case for `@each` in Sass?

Creating nested selectors
Generating theme color classes from a list of color names (Correct answer)
Defining media breakpoints
Importing multiple partials

Correct answer: Generating theme color classes from a list of color names

`@each` is commonly used to iterate over color palettes, spacing scales, or any list to generate utility classes.

Question 30: What does `@forward 'module' hide $private-var` do?

Forwards all module members except `$private-var` (Correct answer)
Hides the entire module
Renames `$private-var` when forwarding
Exports only `$private-var`

Correct answer: Forwards all module members except `$private-var`

The `hide` keyword in `@forward` excludes specified members from being re-exported.

Question 31: What is the main purpose of the `@use 'sass:meta'` module?

To inspect and manipulate Sass code and metadata (Correct answer)
To manage file imports
To add SEO meta tags
To create HTML meta elements

Correct answer: To inspect and manipulate Sass code and metadata

The `sass:meta` module provides introspection functions like `meta.type-of()`, `meta.inspect()`, and `meta.load-css()` for examining Sass values and loading CSS dynamically.

Question 32: What does `meta.inspect($value)` return in Sass?

The Sass data type name
A JSON representation of the value
The CSS output for the value
A string representation of the value useful for debugging (Correct answer)

Correct answer: A string representation of the value useful for debugging

`meta.inspect()` returns a string representation of any Sass value, useful for debugging complex data structures.

Question 33: What is the difference between `@for $i from 1 to 5` and `@for $i from 1 through 5`?

`to` includes 5; `through` excludes 5
They produce the same output
`to` excludes 5; `through` includes 5 (Correct answer)
`to` counts down; `through` counts up

Correct answer: `to` excludes 5; `through` includes 5

In Sass `@for` loops, `to` stops before the end value while `through` includes it.

Question 34: What is the key advantage of `@use` over `@import` in Sass?

It scopes variables and mixins to a namespace, avoiding global pollution (Correct answer)
It is faster to compile
It supports CSS files directly
It runs code at compile time

Correct answer: It scopes variables and mixins to a namespace, avoiding global pollution

`@use` loads Sass files as modules with their own namespaces, preventing conflicts between files.

Question 35: What does the `complement()` function return in Sass?

The inverted RGB values of the color
A darkened version of the color
The color 180 degrees opposite on the color wheel (Correct answer)
The grayscale version of the color

Correct answer: The color 180 degrees opposite on the color wheel

`complement($color)` returns the complementary color by rotating its HSL hue exactly 180 degrees on the color wheel.

Question 36: What is the built-in Sass module for math operations?

sass:numbers
sass:arithmetic
sass:calc
sass:math (Correct answer)

Correct answer: sass:math

The `sass:math` built-in module provides math functions like `math.div()`, `math.ceil()`, and constants like `math.$pi`.

Question 37: How do you interpolate a Sass variable inside a string?

@{$variable}
${variable}
{{$variable}}
#{$variable} (Correct answer)

Correct answer: #{$variable}

Sass string interpolation uses `#{}` syntax to embed variable values inside strings or selectors.

Question 38: What is the result of the Sass expression `type-of(42)`?

value
integer
number (Correct answer)
string

Correct answer: number

The `type-of()` function returns `number` for numeric values in Sass.

Question 39: How does Sass handle operator precedence?

Left to right with no precedence
All operators have equal precedence
Standard mathematical precedence: `*` and `/` before `+` and `-` (Correct answer)
User-defined precedence via parentheses only

Correct answer: Standard mathematical precedence: `*` and `/` before `+` and `-`

Sass follows standard mathematical operator precedence where multiplication and division take priority over addition and subtraction.

Question 40: How does `@extend` interact with a class that has multiple rules?

Only media query rules are inherited
Only the last rule is inherited
All rules that include the extended selector are inherited (Correct answer)
Only direct property declarations are inherited

Correct answer: All rules that include the extended selector are inherited

When you `@extend .foo`, your selector is added to every CSS rule that contains `.foo`, inheriting all of its appearances throughout the stylesheet.

Question 41: Which of the following directives is used to share selector rules and relationships?

@extend (Correct answer)
None of the above
@media

Correct answer: @extend

The `@extend` directive in Sass allows one selector to inherit the styles of another selector, sharing a set of CSS properties. This promotes code reuse and helps keep stylesheets DRY (Don't Repeat Yourself). When `@extend` is used, Sass intelligently groups the selectors in the compiled CSS, reducing file size and improving maintainability.

Question 42: What is a potential downside of deep Sass nesting?

It breaks CSS inheritance
It prevents media queries from working
It slows down the Sass compiler
It generates overly specific CSS selectors that are hard to override (Correct answer)

Correct answer: It generates overly specific CSS selectors that are hard to override

Deep nesting results in high-specificity selectors like `.a .b .c .d`, which are difficult to override without `!important`.

Question 43: Which Sass feature allows a mixin to accept a variable number of arguments?

Default arguments
Variadic arguments using `$args...` (Correct answer)
Keyword arguments
Named lists

Correct answer: Variadic arguments using `$args...`

Appending `...` to the last parameter (`$args...`) allows a mixin or function to accept any number of arguments.

Question 44: What is a 'silent' extend in Sass?

An extend inside a mixin
An extend with `!optional` to suppress errors
Extending a placeholder selector that produces no output unless extended (Correct answer)
An extend wrapped in a comment

Correct answer: Extending a placeholder selector that produces no output unless extended

Extending a placeholder selector (`%`) is called a 'silent' extend because the placeholder produces no CSS until it is extended.

Question 45: Which operator is used for logical AND in Sass `@if` conditions?

&
&&
AND
and (Correct answer)

Correct answer: and

Sass uses the keyword `and` for logical AND in conditional expressions.

Question 46: What is the result of `10px + 5px` in Sass?

10px5px
15
15px (Correct answer)
error

Correct answer: 15px

Sass can add compatible units together, so `10px + 5px` results in `15px`.

Question 47: Who is the SASS creator?

C)Tim Berners-Lee
Guido van Rossum
Hakon Wium Lie
Hampton Catlin (Correct answer)

Correct answer: Hampton Catlin

Hampton Catlin is credited with creating Sass (Syntactically Awesome Style Sheets) in 2006, with its initial implementation in Ruby. He envisioned a more powerful and expressive way to write CSS, introducing features like variables, nesting, and mixins. Natalie Weizenbaum and Chris Eppstein later joined the project, significantly contributing to its development and popularization.

Question 48: How do you pass arguments to a Sass mixin?

@include mixin-name{arg1, arg2};
@include mixin-name arg1 arg2;
@include mixin-name[arg1, arg2];
@include mixin-name($arg1, $arg2); (Correct answer)

Correct answer: @include mixin-name($arg1, $arg2);

Arguments are passed to mixins inside parentheses when calling `@include`.

Question 49: What does the `grayscale()` function do in Sass?

Reduces the lightness of a color to exactly 50%
Removes the alpha channel from the color
Converts a color to grayscale by setting its HSL saturation to 0% (Correct answer)
Converts a color to pure black or white only

Correct answer: Converts a color to grayscale by setting its HSL saturation to 0%

`grayscale($color)` sets the HSL saturation of a color to 0%, producing a grayscale equivalent while preserving the original lightness.

Question 50: How deep should Sass nesting ideally go to maintain readable CSS?

As deep as needed
No more than 3 levels (Correct answer)
No more than 10 levels
Exactly 5 levels

Correct answer: No more than 3 levels

Best practice recommends limiting Sass nesting to 3 levels to avoid specificity issues and unreadable output.

Question 51: What happens to a placeholder selector that is never extended?

It produces no CSS output at all (Correct answer)
It outputs an empty rule
It is treated as a comment
It causes a compile warning

Correct answer: It produces no CSS output at all

Unextended placeholder selectors are completely absent from the CSS output, making them zero-cost for unused style definitions.

Question 52: What is a Sass partial?

A partially compiled Sass file
A Sass file loaded after the main stylesheet
A file with incomplete styles
A Sass file prefixed with an underscore that is not compiled independently (Correct answer)

Correct answer: A Sass file prefixed with an underscore that is not compiled independently

Sass partials are files named with a leading underscore (e.g., `_variables.scss`) that are only included via `@use` or `@import`.

Question 53: Which built-in Sass module provides color manipulation functions?

sass:palette
sass:color (Correct answer)
sass:hsl
sass:colors

Correct answer: sass:color

The `sass:color` module provides functions like `color.adjust()`, `color.mix()`, and `color.change()` for advanced color manipulation.

Question 54: In Sass, which of the following is the proper way to define a variable?

%primary-color: #888;
@primary-color: #888;
#primary-color: #888;
$primary-color: #888; (Correct answer)

Correct answer: $primary-color: #888;

In Sass, variables are defined using a dollar sign (`$`) followed by the variable name, a colon, and then the value. This syntax, `$primary-color: #888;`, correctly declares a variable named `$primary-color` and assigns it the hexadecimal color value `#888`. Variables are a fundamental feature of Sass, allowing for reusable values throughout stylesheets.

Question 55: What does `unitless(42px)` return in Sass?

false (Correct answer)
true
42
error

Correct answer: false

The `unitless()` function returns `false` for numbers that have units like `px`.

Question 56: ________ is an open-source web system.

All of the above
Merb
Rack
Rails (Correct answer)

Correct answer: Rails

Ruby on Rails, commonly known as Rails, is a popular open-source web application framework written in Ruby. It follows the Model-View-Controller (MVC) architectural pattern and emphasizes convention over configuration, enabling rapid development of web applications. Rails provides a full-stack solution, including everything needed to create database-backed web applications.

Question 57: What does `@content` do inside a Sass mixin?

Outputs the mixin name as CSS
Renders a placeholder selector
Inserts a content block passed from the `@include` call (Correct answer)
Includes another partial

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 58: What is the output of `percentage(0.5)` in Sass?

5%
500%
0.5%
50% (Correct answer)

Correct answer: 50%

The `percentage()` function multiplies a unitless number by 100 and appends `%`, so 0.5 becomes 50%.

Question 59: What is the correct syntax for the `darken()` function in Sass?

darken($color, $percentage, $alpha)
darken($amount, $color)
darken($color, $amount) (Correct answer)
darken($hue, $saturation, $color)

Correct answer: darken($color, $amount)

`darken($color, $amount)` takes the color as the first argument and the percentage to darken as the second argument.

Question 60: What does `mix($color1, $color2, $weight)` do in Sass?

Averages the hue of two colors
Multiplies two color values
Blends two colors together based on the given weight percentage (Correct answer)
Converts two colors to grayscale

Correct answer: Blends two colors together based on the given weight percentage

The `mix()` function blends two colors where the `$weight` controls how much of the first color to use.

Question 61: Which Sass function blends two colors together based on a weight percentage?

mix() (Correct answer)
blend()
combine()
merge()

Correct answer: mix()

`mix($color1, $color2, $weight)` blends two colors, with the optional weight (default 50%) controlling how much of the first color is used.

Question 62: What does the Sass `hue()` function return?

The hue of a color in degrees (0–360) (Correct answer)
The HSL saturation as a percentage
The red channel value (0–255)
The HSL lightness as a percentage

Correct answer: The hue of a color in degrees (0–360)

`hue($color)` returns the HSL hue of a color as a number between 0deg and 360deg, representing its position on the color wheel.

Question 63: What is a Sass partial file?

A file that only contains mixins
A file that is only half-complete
A file prefixed with `_` that is not compiled to CSS on its own (Correct answer)
A file that contains only variables

Correct answer: A file prefixed with `_` that is not compiled to CSS on its own

Partial files are Sass files whose names start with an underscore (e.g., `_variables.scss`); they are meant to be imported but not compiled independently.

Question 64: What is the Sass syntax for an if-else statement?

@if condition { } @otherwise { }
@if condition { } @else { } (Correct answer)
@when condition { } @default { }
@if (condition) then { } else { }

Correct answer: @if condition { } @else { }

Sass uses `@if` for the condition, `@else if` for additional conditions, and `@else` for the fallback.

Question 65: How do you configure a module's default variables when using `@use`?

@use 'module' set $var: value;
@use 'module' config ($var: value);
@use 'module'; $var: value !override;
@use 'module' with ($var: value); (Correct answer)

Correct answer: @use 'module' with ($var: value);

The `with` keyword in `@use` allows you to override a module's `!default` variables at load time.

Question 66: What naming convention identifies a Sass partial that should not be compiled to its own CSS file?

A leading underscore in the filename (Correct answer)
An uppercase filename
A .partial extension
A trailing dollar sign

Correct answer: A leading underscore in the filename

Files beginning with an underscore (e.g. _buttons.scss) are partials and are not output directly.

Question 67: What does `@error` do in Sass?

Skips the current block
Logs an error to the CSS output as a comment
Marks a rule as invalid
Throws a fatal error that stops compilation (Correct answer)

Correct answer: Throws a fatal error that stops compilation

`@error` halts Sass compilation immediately and displays the provided message as a fatal error.

Question 68: What does the `meta.get-function()` function allow you to do?

Read the source code of a function
Convert a mixin into a function
Store a reference to a function in a variable and pass it to other functions (Correct answer)
Get the return type of a function

Correct answer: Store a reference to a function in a variable and pass it to other functions

`meta.get-function($name)` returns a first-class function reference that can be stored in a variable and passed to higher-order functions like `meta.call()`.

Question 69: How do you define a Sass map?

$map: [key: value];
$map: (key: value, key2: value2); (Correct answer)
$map: key => value;
$map: {key: value};

Correct answer: $map: (key: value, key2: value2);

Sass maps are defined using parentheses with comma-separated key-value pairs.

Question 70: What is the purpose of an `_index.scss` file in a Sass module directory?

It stores global variables for the project
It is the first file to compile
It acts as the entry point for a directory, auto-loaded when the directory is used (Correct answer)
It defines default styles for the module

Correct answer: It acts as the entry point for a directory, auto-loaded when the directory is used

When a directory is referenced in `@use` or `@forward`, Sass looks for `_index.scss` as the directory's entry point.

SASS (Syntactically Awesome Style Sheets) Certificate Exam

The SASS certificate exam tests knowledge of the SASS/SCSS CSS preprocessor, covering variables, nesting, mixins, functions, control directives, modules, imports, partials, and extends/inheritance.

Questions

70 min

Time Limit

75%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds