SASS with PostCSS pipeline - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

SASS

@import '[1]';

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

A_variables.scss

Bvariables.scss

Cvariables

D_variables

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import path.

Adding the '.scss' extension in the import.

In SASS, you import partials without the underscore and file extension. So '@import "variables";' correctly imports '_variables.scss'.

2fill in blank

medium

Complete the PostCSS config to use the autoprefixer plugin.

SASS

module.exports = {
  plugins: [
    require('[1]')()
  ]
};

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

Aautoprefixer

Bcssnano

Cpostcss-nested

Dpostcss-import

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'postcss-nested' instead of 'autoprefixer'.

Forgetting to call the plugin as a function with '()'.

The autoprefixer plugin automatically adds vendor prefixes to CSS rules. You require it as 'autoprefixer' in the PostCSS config.

3fill in blank

hard

Fix the error in the SASS variable usage inside a nested rule.

SASS

.button {
  $color: blue;
  color: [1];
}

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

A$color

Bcolor

Cblue

D@color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without the '$' sign.

Trying to use '@' instead of '$' for variables.

To use a SASS variable, you must prefix it with '$'. So 'color: $color;' correctly uses the variable.

4fill in blank

hard

Fill both blanks to create a PostCSS plugin list with 'postcss-import' and 'cssnano'.

SASS

module.exports = {
  plugins: [
    require('[1]')(),
    require('[2]')()
  ]
};

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

Apostcss-import

Bautoprefixer

Ccssnano

Dpostcss-nested

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up plugin names or order.

Forgetting to call the plugins as functions with '()'.

The 'postcss-import' plugin allows importing CSS files, and 'cssnano' minifies CSS. Both are required as plugins in PostCSS.

5fill in blank

hard

Fill all three blanks to create a SASS map, access a value, and check a condition.

SASS

$colors: (primary: blue, secondary: green, accent: red);

.button {
  color: map-get($colors, '[1]');
  @if map-get($colors, '[2]') == [3] {
    font-weight: bold;
  }
}

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

Aprimary

Bsecondary

Cred

Daccent

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys not in the map.

Comparing to a wrong color value.

Not quoting the map keys correctly.

The map '$colors' holds color names. We get 'primary' color for the button color. Then we check if the 'accent' color equals 'red' to make font bold.