Bird
Raised Fist0
SASSmarkup~5 mins

SASS with PostCSS pipeline

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

SASS helps write CSS faster and cleaner. PostCSS can add extra features like fixing browser differences automatically.

You want to use variables and nesting in your CSS for easier styling.
You need to add browser prefixes automatically for better compatibility.
You want to optimize your CSS by minifying or adding future CSS features.
You want a smooth way to write modern CSS that works everywhere.
You want to combine multiple CSS tools in one process.
Syntax
SASS
sass input.scss | postcss --use autoprefixer -o output.css
You first write styles in a .scss file using SASS syntax.
Then you run PostCSS with plugins like autoprefixer to process the CSS.
Examples
This SASS code uses a variable and nesting.
SASS
// input.scss
$main-color: #06c;

body {
  color: $main-color;
  nav {
    background: lighten($main-color, 20%);
  }
}
This command runs PostCSS with autoprefixer to add browser prefixes.
SASS
postcss input.css --use autoprefixer -o output.css
Run SASS first to convert SCSS to CSS, then PostCSS to enhance CSS.
SASS
sass input.scss output.css
postcss output.css --use autoprefixer -o final.css
Sample Program

This example shows a simple webpage styled with SASS variables and nesting. PostCSS adds browser prefixes automatically to the CSS for better support.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SASS with PostCSS Example</title>
  <link rel="stylesheet" href="final.css" />
</head>
<body>
  <nav>Menu</nav>
  <p>Hello, styled with SASS and PostCSS!</p>
</body>
</html>

/* input.scss */
$main-color: #3498db;

body {
  font-family: Arial, sans-serif;
  color: $main-color;
  nav {
    background-color: lighten($main-color, 15%);
    padding: 1rem;
    border-radius: 0.5rem;
  }
}

/* After running:
   sass input.scss output.css
   postcss output.css --use autoprefixer -o final.css
*/
OutputSuccess
Important Notes

Always write SASS first, then run PostCSS to process the CSS output.

PostCSS plugins like autoprefixer help fix browser differences automatically.

Use a build tool or script to automate running SASS and PostCSS together.

Summary

SASS lets you write CSS with variables and nesting for easier styles.

PostCSS processes CSS to add features like browser prefixes automatically.

Use them together by compiling SASS first, then running PostCSS on the result.

Practice

(1/5)
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