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

Need a 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

Need a 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

Need a 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

Need a hint?

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