CSS Preprocessors & Custom Properties

1. Welcome and Icebreaker:

• Icebreaker: “Have you ever used a tool to help you write code faster? Which one?”
• Share your experience with tools like code editors, linters, or even browser dev tools. Today, we’ll see how tools can help us write better CSS!

2. Outline the Session:

• Agenda:
  • What are CSS preprocessors (Sass/SCSS)?
  • Using CSS custom properties (variables)
  • Differences and similarities between preprocessors and native CSS variables
  • When to use each approach
• Learning Outcomes:
  • Understand the benefits and limitations of preprocessors
  • Use CSS variables for maintainable, scalable code
  • Recognize scenarios for preprocessors vs. custom properties
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A
  • Short exercises for immediate practice

3. Concept Explanation:

What are CSS Preprocessors?

CSS preprocessors like Sass (Syntactically Awesome Style Sheets) and SCSS (Sassy CSS) are scripting languages that extend CSS and compile down to standard CSS. They add features that don’t exist in plain CSS, such as:

• Variables: Store values (colors, sizes, etc.) for reuse.
• Nesting: Write CSS in a hierarchical way, mirroring HTML structure.
• Mixins: Reusable blocks of code (like functions).
• Partials & Imports: Split CSS into multiple files for better organization.
• Operators: Perform calculations (e.g., color manipulation, math on sizes).

Example (SCSS):

$primary-color: #4caf50;
.box {
  background: $primary-color;
  color: #fff;
  padding: 20px;
}

This compiles to regular CSS, replacing $primary-color with #4caf50.

What are CSS Custom Properties?

CSS custom properties (also called CSS variables) are natively supported in modern browsers. They allow you to define variables directly in your CSS, which can be updated at runtime and scoped to specific elements.

Example:

:root {
  --main-color: #4caf50;
}
.box {
  background: var(--main-color);
  color: #fff;
  padding: 20px;
}

Key Differences:

• Preprocessors: Variables are replaced at compile time. Not dynamic in the browser.
• Custom Properties: Variables are live in the browser. You can change them with JavaScript or based on user interaction (e.g., dark mode).

When to Use Each:

• Use preprocessors for advanced features (mixins, functions, code splitting).
• Use custom properties for dynamic theming, runtime changes, and when you want to leverage native browser support.

Best Practices:

• Use variables for colors, spacing, fonts, and other repeated values.
• Organize variables in a central place (e.g., :root or a variables file).
• For preprocessors, use partials and imports to keep code modular.
• For custom properties, use fallback values: var(--main-color, #333).

Common Pitfalls:

• Forgetting to use fallback values for custom properties.
• Over-nesting in preprocessors, leading to overly specific selectors.
• Relying on preprocessor features not supported in plain CSS (e.g., mixins) when you need to share code with others who only use vanilla CSS.

4. Live Coding Demonstration:

Example 1: CSS Custom Properties

<style>
:root {
  --main-color: #4caf50;
  --padding: 20px;
}
.box {
  background: var(--main-color);
  color: #fff;
  padding: var(--padding);
  border-radius: 8px;
  font-size: 1.2rem;
}
</style>
<div class="box">This uses a CSS variable!</div>

• Step-by-step:
  • Define variables in :root for global use.
  • Use var(--name) to access variables.
  • Change the value in :root to update all uses instantly.
  • Add fallback values for safety: var(--main-color, #333).

Example 2: SCSS Preprocessor

$main-color: #4caf50;
$padding: 20px;
.box {
  background: $main-color;
  color: #fff;
  padding: $padding;
  border-radius: 8px;
  font-size: 1.2rem;
}

• Step-by-step:
  • Define variables with $.
  • Use variables anywhere in your SCSS.
  • Compile SCSS to CSS using a tool (e.g., sass input.scss output.css).

Dynamic Theming with Custom Properties

You can change custom properties at runtime:

<style>
:root {
  --main-color: #4caf50;
}
.dark-theme {
  --main-color: #222;
}
.box {
  background: var(--main-color);
  color: #fff;
  padding: 20px;
}
</style>
<button onclick="document.body.classList.toggle('dark-theme')">Toggle Theme</button>
<div class="box">This box changes color with the theme!</div>

5. Tasks:

• Exercise 1:
  • Create a box using a CSS variable for its background color and padding.
  • Change the variable value in :root and observe the effect.
• Exercise 2:
  • Write a small SCSS snippet that uses variables for color and spacing. Compile it to CSS and use it in an HTML file.
• Challenge:
  • Add a button to your HTML that toggles a class on the <body> to switch between two color themes using custom properties.

Summary:

• CSS preprocessors and custom properties both help you write cleaner, more maintainable CSS.
• Preprocessors add powerful features but require a build step.
• Custom properties are native, dynamic, and great for theming.
• Use the right tool for the job, and combine them for best results!

Questions? Feel free to ask about any part of preprocessors, custom properties, or CSS best practices!