Css Module 43

  Module 43 : Using SCSS preprocessors 

 Module Objectives:

By the end of this module, learners will be able to:

Understand the role of preprocessors in modern CSS development.

Use variables to store reusable values.

Create and apply mixins for reusable chunks of CSS.

Write custom functions for dynamic CSS logic.

Apply SCSS in a project using experiments.

1. Introduction to CSS Preprocessors

        

CSS preprocessors like SASS (Syntactically Awesome Style Sheets) extend CSS with features like variables, nesting, mixins, and functions.

Why Use SASS?

Maintainability: Cleaner and modular code.

Reusability: Avoid repetition.

Logic in Stylesheets: Conditionals, loops, and functions.

2. Variables in SASS/SCSS

Explanation:

Variables store values (e.g., colors, spacing, fonts) that you can reuse throughout your stylesheets.

Syntax:

scss

code

$primary-color: #3498db; $padding-base: 1rem; body { background-color: $primary-color; padding: $padding-base; }

Example:

scss

 code

$font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; $heading-color: #2c3e50; h1, h2, h3 { font-family: $font-stack; color: $heading-color; }

Exercise 1:

Task: Create a button using variables for background color, text color, and padding.

Expected Output:

scss

code

$btn-bg: #e74c3c; $btn-text: #fff; $btn-padding: 10px 20px; .button { background-color: $btn-bg; color: $btn-text; padding: $btn-padding; border: none; border-radius: 5px; }

3. Mixins in SASS/SCSS

        

Explanation:

Mixins let you define a group of CSS declarations that you can reuse throughout your stylesheet.

Syntax:

scss

 code

@mixin border-radius($radius) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } .box { @include border-radius(10px); }

Example:

scss

 code

@mixin flex-center { display: flex; justify-content: center; align-items: center; } .container { @include flex-center; height: 100vh; }

Exercise 2:

Task: Create a mixin for a box-shadow with default and custom parameters.

Expected Output:

scss

code

@mixin box-shadow($x: 0px, $y: 2px, $blur: 5px, $color: rgba(0, 0, 0, 0.1)) { box-shadow: $x $y $blur $color; } .card { @include box-shadow; } .alert { @include box-shadow(0px, 4px, 10px, rgba(255, 0, 0, 0.2)); }

4. Functions in SASS/SCSS

Explanation:

Functions perform calculations and return values. Great for dynamic values like spacing, font sizes, or color manipulation.

Syntax:

scss

code

@function em($px, $base: 16) { @return ($px / $base) * 1em; } .text { font-size: em(18); }

Example:

scss code

@function spacing($multiplier) { @return $multiplier * 8px; } .card { padding: spacing(2); // 16px margin: spacing(3); // 24px }

Exercise 3:

Task: Create a function that darkens a color based on a percentage.

Expected Output:

scss

code

@function darken-color($color, $percent) { @return darken($color, $percent); } .btn { background-color: darken-color(#3498db, 10%); }

5. Build a Reusable SCSS UI Kit

Objective:

Build a mini design system using SCSS with variables, mixins, and functions.

Step-by-Step Lab Instructions:

Step 1: Set Up Project Structure

text

code

/project-root |-- /scss | |-- _variables.scss | |-- _mixins.scss | |-- _functions.scss | |-- main.scss

Step 2: Define Variables _variables.scss

scss

 code

$primary-color: #1abc9c; $secondary-color: #2c3e50; $base-padding: 12px; $font-base: 'Roboto', sans-serif;

Step 3: Create Mixins _mixins.scss

scss

 code

@mixin transition($prop...) { transition: $prop 0.3s ease-in-out; } @mixin responsive($breakpoint) { @if $breakpoint == 'tablet' { @media (max-width: 768px) { @content; } } @else if $breakpoint == 'mobile' { @media (max-width: 480px) { @content; } } }

Step 4: Write Functions _functions.scss

scss

code

@function rem($px, $base: 16) { @return ($px / $base) * 1rem; }

Step 5: Use in Main Stylesheet main.scss

scss

 code

@import 'variables', 'mixins', 'functions'; body { font-family: $font-base; padding: $base-padding; } .button { background: $primary-color; color: #fff; padding: rem(14) rem(24); @include transition(all); @include responsive('mobile') { padding: rem(10) rem(20); } }

Expected Outcome: A clean, modular SCSS-based styling system that adapts across devices and reuses components efficiently.

6. Summary

Variables keep your code DRY and make global changes easy.

        

Mixins reduce repetition by encapsulating common patterns.

Functions bring logic to styles and enable dynamic calculations.

SASS improves code organization and maintenance significantly.

7. Assessment Questions

What are the benefits of using mixins over repeating code blocks?

How do SCSS functions differ from mixins?

Create a mixin for a button with custom padding, background color, and text color.

8. Final Exercise

Project Task: Build a responsive card component using:

Variables for spacing and colors.

A mixin for shadows.

A function to convert pixels to rem.