Chapter 11: Preprocessors and Postprocessors

Streamline your CSS workflow with preprocessors and postprocessors. These tools introduce advanced features, making your stylesheets more efficient and maintainable.

Introduction to SASS and LESS

• SASS: Adds power and elegance with variables, nesting, and mixins.
• LESS: Similar capabilities, easy to learn.

Example:

// SASS Example
$primary-color: #3498db;
body { color: $primary-color; }
// LESS Example
@primary-color: #3498db;
body { color: @primary-color; }

Key Features: Variables, Nesting, Mixins

• Variables: Store reusable values.
• Nesting: Reflect HTML structure in CSS.
• Mixins: Reuse chunks of code.

Example:

// SASS Example
$font-stack: Helvetica, sans-serif;
body {
  font: 100% $font-stack;
  header {
    nav { ul { li { display: inline-block; } } }
  }
}
// LESS Example
@font-stack: Helvetica, sans-serif;
body {
  font: 100% @font-stack;
  header {
    nav { ul { li { display: inline-block; } } }
  }
}

Compiling CSS

• Compiling: Convert SASS/LESS to CSS before use.
• Tools: Use node-sass for SASS, lessc for LESS.

Example:

// Compile SASS
sass styles.scss styles.css
// Compile LESS
lessc styles.less styles.css

PostCSS and Autoprefixer

• Postprocessors: Enhance CSS after writing.
• PostCSS: Uses plugins, Autoprefixer adds vendor prefixes.

Example:

// Install PostCSS and Autoprefixer
npm install postcss postcss-cli autoprefixer
// Configuration file (postcss.config.js)
module.exports = { plugins: [require('autoprefixer')] };
// Run PostCSS
postcss styles.css -o prefixed-styles.css

Practical Exercise

1. Set Up: Choose SASS or LESS.
2. Write and Compile: Create a stylesheet with variables, nesting, mixins. Compile it.
3. PostCSS: Set up and run PostCSS with Autoprefixer.
4. Check: Verify cross-browser compatibility.

Example:

// SASS Example with PostCSS
$primary-color: #3498db;
body { color: $primary-color; }
// Compile and Run PostCSS
sass styles.scss styles.css
postcss styles.css -o prefixed-styles.css

Key Takeaways

• Preprocessors like SASS and LESS enhance CSS with variables, nesting, mixins.
• Compile preprocessors to produce regular CSS.
• Postprocessors like PostCSS and Autoprefixer add vendor prefixes and other enhancements.
• Streamline your CSS workflow with these tools for efficient, maintainable styles.

Conclusion

Mastering preprocessors and postprocessors boosts your CSS efficiency. Next, we’ll dive into CSS frameworks to further simplify and speed up your development process.