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.

Practice

1. What is the main role of PostCSS in a SASS with PostCSS pipeline?

easy

A. To compile SASS code into CSS

B. To process compiled CSS and add browser prefixes automatically

C. To write variables and nesting in styles

D. To minify JavaScript files

Solution

1. Step 1: Understand the role of SASS

   SASS is a preprocessor that lets you write CSS with variables and nesting, but it does not add browser prefixes.

2. Step 2: Understand the role of PostCSS

   PostCSS processes the compiled CSS to add features like browser prefixes automatically, improving browser compatibility.

3. Final Answer:

   To process compiled CSS and add browser prefixes automatically -> Option B

4. Quick Check:

   PostCSS adds prefixes after SASS compiles CSS [OK]

Hint: PostCSS works on CSS output, not on SASS source [OK]

Common Mistakes:

• Confusing SASS compilation with PostCSS processing
• Thinking PostCSS compiles SASS
• Assuming PostCSS writes variables

2. Which of the following is the correct order to use SASS and PostCSS in a build pipeline?

easy

A. Compile SASS first, then run PostCSS

B. Only run SASS, PostCSS is optional

C. Run both simultaneously

D. Run PostCSS first, then compile SASS

Solution

1. Step 1: Identify the output of SASS

   SASS compiles .scss files into plain CSS files.

2. Step 2: Understand PostCSS input requirements

   PostCSS works on CSS files, so it must run after SASS compilation.

3. Final Answer:

   Compile SASS first, then run PostCSS -> Option A

4. Quick Check:

   SASS compiles, PostCSS processes CSS [OK]

Hint: Compile SASS before PostCSS to process CSS output [OK]

Common Mistakes:

• Running PostCSS before SASS compilation
• Trying to run both at the same time
• Skipping PostCSS thinking it's unnecessary

3. Given this SASS code and PostCSS with autoprefixer, what will be the final CSS output?

$color: blue;
.button {
  color: $color;
  display: flex;
}

medium

A. .button { color: blue; display: -webkit-box; display: -ms-flexbox; display: flex; }

B. .button { color: blue; display: flex; }

C. .button { color: $color; display: flex; }

D. .button { color: blue; display: block; }

Solution

1. Step 1: Compile SASS variables and nesting

   The variable $color is replaced with blue, so color: blue; is output.

2. Step 2: PostCSS autoprefixer adds vendor prefixes

   For display: flex;, autoprefixer adds -webkit-box and -ms-flexbox prefixes for browser support.

3. Final Answer:

   .button { color: blue; display: -webkit-box; display: -ms-flexbox; display: flex; } -> Option A

4. Quick Check:

   SASS compiles variables, PostCSS adds prefixes [OK]

Hint: SASS compiles variables; PostCSS adds prefixes like -webkit- [OK]

Common Mistakes:

• Leaving SASS variables uncompiled
• Ignoring vendor prefixes added by PostCSS
• Replacing flex with block incorrectly

4. You wrote this SASS code but your PostCSS autoprefixer is not adding prefixes. What is the likely problem?

$main-color: red;
.container {
  color: $main-color;
  display: flex;
}

medium

A. PostCSS does not support autoprefixer

B. You used wrong variable syntax in SASS

C. You forgot to compile SASS before running PostCSS

D. You need to write prefixes manually in SASS

Solution

1. Step 1: Check SASS compilation step

   If SASS is not compiled first, PostCSS receives raw SASS code and cannot add prefixes.

2. Step 2: Confirm PostCSS autoprefixer usage

   PostCSS autoprefixer works on CSS, so it requires compiled CSS input.

3. Final Answer:

   You forgot to compile SASS before running PostCSS -> Option C

4. Quick Check:

   Compile SASS before PostCSS for prefixes [OK]

Hint: Always compile SASS before PostCSS to enable prefixing [OK]

Common Mistakes:

• Running PostCSS on uncompiled SASS
• Assuming autoprefixer works on SASS syntax
• Thinking prefixes must be written manually

5. You want to create a responsive button style using SASS variables and PostCSS autoprefixer. Which approach correctly combines both tools?

// SASS variables
$btn-color: green;

// SASS nested styles
.button {
  color: $btn-color;
  display: flex;
  &:hover {
    color: darkgreen;
  }
}

// PostCSS autoprefixer runs after SASS compilation

hard

A. Use only PostCSS autoprefixer without SASS for variables

B. Write CSS with prefixes manually, then run SASS compiler

C. Run PostCSS autoprefixer on SASS files before compiling

D. Write SASS with variables and nesting, compile it, then run PostCSS autoprefixer to add prefixes

Solution

1. Step 1: Use SASS for variables and nesting

   SASS lets you write variables and nested styles for cleaner CSS.

2. Step 2: Compile SASS to CSS, then run PostCSS autoprefixer

   PostCSS autoprefixer adds vendor prefixes after SASS compilation for browser support.

3. Final Answer:

   Write SASS with variables and nesting, compile it, then run PostCSS autoprefixer to add prefixes -> Option D

4. Quick Check:

   SASS for structure, PostCSS for prefixes [OK]

Hint: Write SASS first, then autoprefix CSS with PostCSS [OK]

Common Mistakes:

• Running autoprefixer before SASS compilation
• Writing prefixes manually instead of using PostCSS
• Skipping SASS variables and nesting