SASS with PostCSS pipeline - Mini Project: Build & Apply

SASS with PostCSS Pipeline

📖 Scenario: You are building a simple style setup for a website. You want to write your styles using SASS to use variables and nesting. Then, you want to process your SASS output with PostCSS to add vendor prefixes automatically for better browser support.

🎯 Goal: Create a SASS file with variables and nested styles. Then configure a PostCSS pipeline that uses autoprefixer to add vendor prefixes. Finally, produce a CSS file that is ready to use in a browser.

📋 What You'll Learn

Create a SASS file with a color variable and nested selectors

Create a PostCSS configuration file that uses autoprefixer plugin

Write a script or command to compile SASS to CSS and then run PostCSS on the CSS output

Ensure the final CSS file contains vendor prefixes added by autoprefixer

💡 Why This Matters

🌍 Real World

Web developers often write styles in SASS for easier maintenance and use PostCSS to ensure CSS works well across different browsers by adding necessary prefixes.

💼 Career

Understanding how to set up a SASS and PostCSS pipeline is essential for front-end developers to produce modern, maintainable, and compatible CSS for websites.

1

Create a SASS file with variables and nesting

Create a file named styles.scss. Inside it, define a SASS variable called $primary-color with the value #3498db. Then write a nested style for a .button class that sets background-color to $primary-color and inside it a nested :hover selector that changes background-color to #2980b9.

SASS

// Create styles.scss with $primary-color and nested .button styles
// Your code here

Hint

Use $primary-color: #3498db; to define the variable. Nest the :hover selector inside .button using &:hover.

2

Create PostCSS configuration with autoprefixer

Create a file named postcss.config.js. Inside it, export a configuration object that includes the autoprefixer plugin. Use require('autoprefixer') to import the plugin.

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: #2980b9;
  }
}

// Create postcss.config.js with autoprefixer plugin
// Your code here

Hint

Use module.exports = { plugins: [ require('autoprefixer') ] }; to configure PostCSS.

3

Write a script to compile SASS and run PostCSS

Write a command or script line that compiles styles.scss to styles.css using the sass CLI, then runs postcss on styles.css to output to styles.prefixed.css. Use the commands sass styles.scss styles.css and postcss styles.css -o styles.prefixed.css chained with &&.

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: #2980b9;
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

// Write the command to compile SASS and run PostCSS
// Your code here

Hint

Use sass styles.scss styles.css && postcss styles.css -o styles.prefixed.css to compile and process CSS.

4

Verify final CSS contains vendor prefixes

Open the generated styles.prefixed.css file and add a CSS rule for .button with display: flex;. Then run the PostCSS command again to add vendor prefixes like -webkit-flex. Add the display: flex; rule inside the .button selector in styles.scss before compiling and processing again.

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: #2980b9;
  }
  // Add display flex here
}

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

// Command to compile and process CSS
sass styles.scss styles.css && postcss styles.css -o styles.prefixed.css

// Your code here

Hint

Add display: flex; inside the .button selector in styles.scss to see vendor prefixes after processing.

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