11Preprocessors & Tools

CSS Preprocessors: Sass & SCSS

CSS preprocessors like Sass allow you to write more powerful and maintainable CSS. You can use variables, nesting, mixins, and imports to create modular, scalable styles.

// Variables in SCSS
$primary-color: #3498db;
$spacing: 16px;

button {
  background-color: $primary-color;
  padding: $spacing;
  border-radius: 5px;
}

// Nesting
nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        text-decoration: none;
        color: $primary-color;
      }
    }
  }
}

// Mixins
@mixin card-style($bg-color, $padding: 1rem) {
  background-color: $bg-color;
  padding: $padding;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card {
  @include card-style(#f39c12);
}

Sass enhances standard CSS by allowing dynamic features, making large projects easier to maintain and update.

CSS Methodologies

Structured CSS methodologies help keep styles consistent and modular, preventing conflicts and improving collaboration.

// BEM Example
// Block: card, Element: title, Modifier: large
.card {
  background-color: #fff;
}
.card__title {
  font-size: 1.2rem;
}
.card--large {
  font-size: 1.5rem;
}

Other approaches include SMACSS (Scalable and Modular Architecture for CSS) and OOCSS (Object-Oriented CSS), which emphasize separating structure, skin, and layout for reusable components.

Developer Tools & Debugging

Browser DevTools are essential for inspecting, debugging, and experimenting with CSS in real time.

// Example: Inspecting styles
// 1. Right-click element → Inspect
// 2. Edit CSS live in 'Styles' panel
// 3. Check computed styles for layout issues

DevTools allow you to quickly spot issues with spacing, positioning, colors, and responsiveness. You can also simulate devices to test media queries and layout changes.

Mini Project Step

Refactor your card layout from previous modules using SCSS variables, nesting, and mixins. Apply BEM naming conventions and debug layout issues using browser DevTools. Ensure components are modular and responsive.

Sass Official Guide

MDN CSS Methodologies Overview

Chrome DevTools Guide