CSS Preprocessors Introduction: SASS/SCSS

Variables

Variables store values that you can reuse throughout your stylesheets. Think of them as containers that hold information you'll use repeatedly—like brand colors, font stacks, or spacing values.

// Variables in SCSS
$primary-color: #0066cc;
$secondary-color: #ff9900;
$font-stack: 'Helvetica', 'Arial', sans-serif;
$base-spacing: 16px;

body {
  font-family: $font-stack;
  color: #333;
  line-height: 1.5;
  margin: $base-spacing;
}

h1 {
  color: $primary-color;
  margin-bottom: $base-spacing;
}

.button {
  background-color: $secondary-color;
  padding: $base-spacing / 2 $base-spacing;
}

Real-world application: When your design system changes (for example, a brand color update), you only need to modify the variable value in one place rather than searching through your entire stylesheet for every instance.

Nesting

Nesting allows you to write selectors that follow the same visual hierarchy as your HTML. This creates more readable and organized code, especially for complex components.

// Nesting in SCSS
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
  
  .card-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 16px;
    
    h2 {
      margin: 0;
      font-size: 18px;
    }
  }
  
  .card-body {
    font-size: 14px;
    
    p {
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

The & symbol is a special placeholder that represents the parent selector. It's particularly useful for pseudo-classes, pseudo-elements, and modifier classes.

.button {
  padding: 10px 15px;
  background-color: #0066cc;
  color: white;
  
  &:hover {
    background-color: #0052a3;
  }
  
  &:active {
    background-color: #004080;
  }
  
  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  &--large {
    padding: 15px 25px;
    font-size: 18px;
  }
}

Warning: Excessive nesting can lead to overly specific selectors and CSS bloat. Try to limit nesting to 3-4 levels deep.

Real-world application: Nesting is particularly valuable when working with component-based architectures, as it allows you to encapsulate all the styles for a component in one logical block.

Mixins

Mixins are reusable blocks of CSS declarations that you can include in other selectors. Think of them as functions that output CSS. They can also accept parameters for greater flexibility.

// Basic mixin definition
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Mixin with parameters
@mixin box-shadow($x: 0, $y: 2px, $blur: 4px, $color: rgba(0, 0, 0, 0.1)) {
  box-shadow: $x $y $blur $color;
}

// Using mixins
.modal {
  @include flex-center;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  
  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    @include box-shadow(0, 5px, 15px, rgba(0, 0, 0, 0.3));
  }
}

.card {
  @include box-shadow; // Uses default values
}

.button {
  @include box-shadow(1px, 1px, 3px, rgba(0, 0, 0, 0.2));
}

Real-world application: Mixins are perfect for cross-browser prefixing, consistent styling patterns like buttons or form elements, and complex CSS properties that need to be applied consistently but with slight variations.

Extend/Inheritance

The @extend directive lets you share a set of CSS properties from one selector to another. It's useful when elements share common styles but also have their own specific styles.

// Base style
.message {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

// Extending base styles
.success-message {
  @extend .message;
  border-color: green;
  color: green;
  background-color: #e6f9e6;
}

.error-message {
  @extend .message;
  border-color: red;
  color: red;
  background-color: #ffebeb;
}

.warning-message {
  @extend .message;
  border-color: orange;
  color: #856404;
  background-color: #fff3cd;
}

Key difference from mixins: Unlike mixins, @extend doesn't copy the CSS properties; instead, it adds the selector to the original rule's selector group, which can result in more compact CSS output but also potentially complex selector chains.

Real-world application: Extend is ideal for variations of a base component, like different alert types, button styles, or form element states that share common styling.

Partials and Imports

Sass allows you to split your CSS into smaller, more manageable files (partials) and then import them into a main file. This helps organize your code and makes large projects more maintainable.

Partials are named with a leading underscore (e.g., _variables.scss) to indicate they shouldn't be compiled individually.

// File: _variables.scss
$primary-color: #0066cc;
$secondary-color: #ff9900;
$font-stack: 'Helvetica', 'Arial', sans-serif;

// File: _typography.scss
@import 'variables';

body {
  font-family: $font-stack;
  line-height: 1.5;
}

h1 {
  font-size: 2em;
  color: $primary-color;
}

// File: _buttons.scss
@import 'variables';

.button {
  display: inline-block;
  padding: 10px 15px;
  background-color: $primary-color;
  color: white;
  border-radius: 4px;
}

// File: main.scss
@import 'variables';
@import 'typography';
@import 'buttons';
@import 'forms';
@import 'layout';
@import 'components/card';
@import 'components/modal';
@import 'pages/home';
@import 'pages/about';

Note: In modern Sass, the @use rule is preferred over @import as it helps avoid global namespace pollution and provides more explicit dependency management.

Real-world application: File organization becomes critical in large projects. A common pattern is to organize files by functionality (variables, mixins, base styles) and by components, creating a modular structure that mirrors your application architecture.

Functions and Operators

Sass includes built-in functions and allows you to define your own functions to manipulate values. You can also use mathematical operators directly in your styles.

// Built-in functions
.dark-theme {
  background-color: #333;
  color: white;
  
  a {
    color: lighten(#0066cc, 20%);
    
    &:hover {
      color: lighten(#0066cc, 30%);
    }
  }
}

.box {
  // Mathematical operators
  width: 100% / 3;
  margin: 20px * 1.5;
  padding: (10px + 5px) (20px - 5px);
}

// Custom function
@function calculate-fluid-size($min-size, $max-size, $min-viewport, $max-viewport) {
  $size-difference: $max-size - $min-size;
  $viewport-difference: $max-viewport - $min-viewport;
  
  @return calc(#{$min-size}px + #{$size-difference} * ((100vw - #{$min-viewport}px) / #{$viewport-difference}));
}

h1 {
  // This creates a fluid font size that scales with the viewport width
  font-size: calculate-fluid-size(24, 48, 320, 1200);
}

Common built-in functions:

• lighten($color, $amount) and darken($color, $amount)
• rgba($color, $alpha)
• mix($color1, $color2, $weight)
• percentage($number)
• if($condition, $if-true, $if-false)

Real-world application: Functions are especially useful for complex calculations like fluid typography, color manipulation for hover states or accessibility, and creating consistent spacing or sizing scales.

Control Directives

Sass provides programming constructs like conditionals and loops that can generate CSS dynamically based on conditions or iterate over values.

// If-else condition
$theme: 'dark';

.container {
  @if $theme == 'dark' {
    background-color: #333;
    color: white;
  } @else if $theme == 'light' {
    background-color: #fff;
    color: #333;
  } @else {
    background-color: #f5f5f5;
    color: #333;
  }
}

// For loop
$grid-columns: 12;

@for $i from 1 through $grid-columns {
  .col-#{$i} {
    width: percentage($i / $grid-columns);
  }
}

// Each loop with a list
$sizes: ('small': 0.875rem, 'medium': 1rem, 'large': 1.25rem, 'xlarge': 1.5rem);

@each $name, $size in $sizes {
  .text-#{$name} {
    font-size: $size;
  }
}

// While loop (less common)
$i: 1;
$max-size: 5;

@while $i <= $max-size {
  .spacer-#{$i} {
    margin-bottom: $i * 0.25rem;
  }
  $i: $i + 1;
}

Real-world application: Control directives are powerful for generating utility classes (like spacing helpers or grid systems), creating responsive typography scales, or conditionally applying styles based on themes or feature flags.