SASS with PostCSS pipeline - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is SASS in web development?

SASS is a CSS preprocessor that lets you write styles using variables, nested rules, and functions to make CSS easier to manage and reuse.

beginner

What role does PostCSS play in a CSS build pipeline?

PostCSS processes CSS with plugins to add features like autoprefixing, minification, and compatibility fixes after SASS compiles CSS.

intermediate

Why combine SASS and PostCSS in a pipeline?

Combining SASS and PostCSS lets you write advanced styles with SASS features, then optimize and enhance the CSS output with PostCSS plugins for better browser support and performance.

beginner

Name a common PostCSS plugin used after SASS compilation.

Autoprefixer is a common PostCSS plugin that adds vendor prefixes to CSS rules to ensure compatibility across different browsers.

intermediate

What is the typical order of processing in a SASS with PostCSS pipeline?

First, SASS compiles .scss files into plain CSS. Then, PostCSS processes that CSS with plugins like Autoprefixer or cssnano to optimize and enhance the styles.

What does SASS primarily add to CSS?

A Variables and nesting

B JavaScript functionality

C Database connectivity

D Image optimization

SASS adds features like variables and nested rules to make CSS easier to write and maintain.

Which PostCSS plugin automatically adds vendor prefixes?

A Prettier

B cssnano

C Stylelint

D Autoprefixer

Autoprefixer scans CSS and adds necessary vendor prefixes for browser compatibility.

In a SASS with PostCSS pipeline, when is PostCSS run?

A Before SASS compilation

B At the same time as SASS

C After SASS compilation

D PostCSS is not used with SASS

PostCSS processes the CSS output after SASS compiles the SCSS files.

Which of these is NOT a benefit of using PostCSS after SASS?

A Adding vendor prefixes

B Writing variables

C Minifying CSS

D Fixing browser bugs

Writing variables is a SASS feature, not something PostCSS adds.

What file extension do SASS source files usually have?

A .scss

B .html

C .js

D .css

SASS source files typically use the .scss extension.

Explain how SASS and PostCSS work together in a CSS build pipeline.

Think about the order and purpose of each tool.

List common PostCSS plugins used after SASS and describe their purpose.

Focus on plugins that optimize CSS after SASS compilation.