Why migration to modern SASS matters - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a variable in modern SASS.

SASS

$primary-color: [1];

Drag options to blanks, or click blank then click option'

A#3498db

Bprimary-color

Ccolor-primary

Dvar-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of color values

Missing the dollar sign in variable declaration

In modern SASS, variables start with a $ and are assigned values like colors directly. Here, #3498db is a valid color value.

2fill in blank

medium

Complete the code to use a variable inside a CSS rule in modern SASS.

SASS

button {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

A$primary-color

Bprimary-color

Cvar(primary-color)

D#primary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS variable syntax var()

Omitting the dollar sign

To use a SASS variable inside a rule, you write the variable name with the dollar sign, like $primary-color.

3fill in blank

hard

Fix the error in this nested selector using modern SASS syntax.

SASS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  [1] {
    display: block;
  }
}

Drag options to blanks, or click blank then click option'

A.li

Bli

C& li

D#li

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain li without &

Using class or ID selectors incorrectly

In modern SASS, to nest selectors that depend on the parent, use the ampersand &. Here, & li means nav li.

4fill in blank

hard

Fill both blanks to create a SASS map and access its value.

SASS

$colors: (primary: #3498db, secondary: #2ecc71);

.button {
  color: map-get($colors, [1]);
  background-color: [2];
}

Drag options to blanks, or click blank then click option'

Aprimary

B#3498db

Csecondary

D#2ecc71

Attempts:

3 left

💡 Hint

Common Mistakes

Using color values instead of keys in map-get

Mixing keys and values incorrectly

The map-get function retrieves the value for the key primary from the $colors map. The background color is then set to the color value #3498db.

5fill in blank

hard

Fill all three blanks to write a SASS function that darkens a color and use it.

SASS

@function [1]($color, $amount) {
  @return darken($color, $amount);
}

.alert {
  background-color: [2];
  border-color: [3];
}

Drag options to blanks, or click blank then click option'

Adarken-color

B$primary-color

Cdarken-color($primary-color, 10%)

D$alert-border

Attempts:

3 left

💡 Hint

Common Mistakes

Not defining the function name

Using variables without dollar sign

Not calling the function correctly

The function is named darken-color. The alert background uses the variable $primary-color. The border color uses the function call darken-color($primary-color, 10%) to darken the color by 10%.

Practice

1. Why is migrating to modern SASS important for organizing styles?

easy

A. Because modern SASS uses modules to keep code clean and avoid conflicts

B. Because modern SASS removes all CSS features

C. Because modern SASS only works with JavaScript

D. Because modern SASS disables variables

Solution

1. Step 1: Understand the role of modules in modern SASS

   Modern SASS introduces modules to organize styles better and prevent naming conflicts.

2. Step 2: Compare with old SASS style management

   Old SASS mixes all styles globally, causing conflicts and messy code.

3. Final Answer:

   Because modern SASS uses modules to keep code clean and avoid conflicts -> Option A

4. Quick Check:

   Modules improve style organization = D [OK]

Hint: Remember: modules keep styles neat and conflict-free [OK]

Common Mistakes:

• Thinking modern SASS removes CSS features
• Believing modern SASS only works with JavaScript
• Assuming variables are disabled in modern SASS

2. Which of the following is the correct syntax to import a module in modern SASS?

easy

A. @import 'colors';

B. @use 'colors';

C. import colors from 'colors';

D. #use colors;

Solution

1. Step 1: Identify modern SASS import syntax

   Modern SASS uses @use to import modules, replacing @import.

2. Step 2: Check each option

   @use 'colors'; uses @use 'colors'; which is correct. @import 'colors'; uses old syntax. JavaScript-style import and #use are invalid.

3. Final Answer:

   @use 'colors'; -> Option B

4. Quick Check:

   @use is modern import syntax = A [OK]

Hint: Modern SASS imports use '@use', not '@import' [OK]

Common Mistakes:

• Using old '@import' instead of '@use'
• Trying JavaScript import syntax in SASS
• Using invalid symbols like '#use'

3. What will be the output CSS of this modern SASS code?

@use 'sass:color';
$base: #c6538c;
.button {
  background-color: color.scale($base, $lightness: 20%);
}

medium

A. .button { background-color: color.scale(#c6538c, $lightness: 20%); }

B. .button { background-color: #c6538c; }

C. .button { background-color: #d175a3; }

D. Syntax error

Solution

1. Step 1: Understand color.scale function

   The color.scale function lightens the base color by 20% lightness.

2. Step 2: Calculate the resulting color

   Lightening #c6538c by 20% results in #d175a3, which is the new background color.

3. Final Answer:

   .button { background-color: #d175a3; } -> Option C

4. Quick Check:

   color.scale lightens color = C [OK]

Hint: color.scale changes color brightness; expect a lighter shade [OK]

Common Mistakes:

• Expecting original color without change
• Thinking color.scale returns code, not color
• Assuming syntax error due to module use

4. Identify the error in this modern SASS code:

@use 'sass:math';
$size: 10px;
.box {
  width: math.div($size, 2);
  height: math.div($size, 0);
}

medium

A. Division by zero error in math.div($size, 0)

B. Incorrect module name 'sass:math'

C. Missing semicolon after $size declaration

D. math.div does not exist in modern SASS

Solution

1. Step 1: Check math.div usage

   math.div divides numbers safely in modern SASS; dividing by zero is invalid.

2. Step 2: Identify the error

   math.div($size, 0) causes a division by zero error, which is not allowed.

3. Final Answer:

   Division by zero error in math.div($size, 0) -> Option A

4. Quick Check:

   Division by zero causes error = A [OK]

Hint: Check for zero in math.div to avoid errors [OK]

Common Mistakes:

• Thinking 'sass:math' is invalid module
• Ignoring division by zero
• Assuming missing semicolon causes error

5. You want to migrate old SASS code using @import to modern SASS modules. Which approach correctly updates the code to avoid global namespace conflicts?

// Old code
@import 'buttons';
@import 'colors';

.button {
  color: $primary-color;
}

hard

A. @use 'buttons';
@use 'colors';

.button {
color: $primary-color;
}

B. @use 'buttons';
@use 'colors';

.button {
color: colors-primary-color;
}

C. @import 'buttons';
@import 'colors';

.button {
color: colors.$primary-color;
}

D. @use 'buttons';
@use 'colors' as c;

.button {
color: c.$primary-color;
}

Solution

1. Step 1: Understand namespace in modern SASS modules

   Modern SASS requires using namespaces to avoid conflicts, often with aliases.

2. Step 2: Check each option for correct namespace usage

   @use 'buttons'; @use 'colors' as c; .button { color: c.$primary-color; } uses @use 'colors' as c; and accesses variable as c.$primary-color, which is correct. @use 'buttons'; @use 'colors'; .button { color: $primary-color; } misses namespace prefix. @import 'buttons'; @import 'colors'; .button { color: colors.$primary-color; } uses old @import. @use 'buttons'; @use 'colors'; .button { color: colors-primary-color; } uses invalid variable name.

3. Final Answer:

   @use 'buttons'; @use 'colors' as c; .button { color: c.$primary-color; } -> Option D

4. Quick Check:

   Use namespaces with aliases = B [OK]

Hint: Use '@use' with aliases to avoid global conflicts [OK]

Common Mistakes:

• Not using namespace prefix for variables
• Continuing to use '@import' instead of '@use'
• Using invalid variable names without $ or dash