Why output optimization matters in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the output style to compressed in Sass.

SASS

sass --style [1] input.scss output.css

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

Acompact

Bexpanded

Cnested

Dcompressed

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'expanded' which keeps spaces and new lines.

Using 'nested' which is more readable but not optimized.

Setting --style to compressed tells Sass to minimize the CSS output by removing spaces and new lines.

2fill in blank

medium

Complete the code to import a partial Sass file named '_variables.scss'.

SASS

@import '[1]';

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

Avariables.scss

Bvars

Cvariables

D_variables

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import name.

Adding the '.scss' extension in the import.

When importing partials in Sass, you omit the underscore and file extension. So @import 'variables'; imports _variables.scss.

3fill in blank

hard

Fix the error in the Sass code to correctly nest styles for a button hover state.

SASS

button {
  color: blue;
  &:[1] {
    color: red;
  }
}

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

Ahover

Bfocus

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'active' which applies when the button is clicked.

Using 'visited' which applies to links, not buttons.

The &:hover selector applies styles when the mouse is over the button.

4fill in blank

hard

Fill both blanks to create a Sass map of colors and access the primary color.

SASS

$colors: ([1]: #ff0000, secondary: #00ff00);
.primary-color {
  color: map-get($colors, '[2]');
}

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

Aprimary

Bprimary-color

Csecondary

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'primary-color' instead of 'primary' as the key.

Mixing up 'secondary' with 'primary'.

The map key is primary. To get the primary color, use map-get($colors, 'primary').

5fill in blank

hard

Fill all three blanks to create a mixin that sets font size and color, then use it.

SASS

@mixin [1]($size, $color) {
  font-size: $size;
  color: $color;
}

h1 {
  @include [2](2rem, [3]);
}

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

Atext-style

Cblue

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for mixin definition and include.

Choosing a color not listed in options.

The mixin name is text-style. We include it with font size 2rem and color red.