SASS/SCSS Complete Guide

SASS (Syntactically Awesome Style Sheets) extends CSS with powerful features. Let's master it.

Variables

scss
// Variables
$primary-color: #3498db;
$font-size-base: 16px;
$spacing-unit: 8px;

// Usage
.button {
  background-color: $primary-color;
  font-size: $font-size-base;
  padding: $spacing-unit * 2;
}

Nesting

scss
.navbar {
  background-color: #333;

  .logo {
    font-size: 24px;
  }

  .nav-link {
    color: white;

    &:hover {
      color: $primary-color;
    }
  }
}

// Compiles to:
// .navbar { background-color: #333; }
// .navbar .logo { font-size: 24px; }
// .navbar .nav-link { color: white; }
// .navbar .nav-link:hover { color: #3498db; }

Mixins

scss
// Define mixin
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// With parameters
@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// Usage
.container {
  @include flex-center;
}

.primary-button {
  @include button(#3498db, white);
}

Functions

scss
// Built-in functions
.button {
  background-color: darken(#3498db, 10%);
  color: lighten(#333, 20%);
  font-size: percentage(0.5); // 50%
  width: round(15.4px); // 15px
  opacity: random(); // 0-1
}

// Custom functions
@function px-to-em($px, $base: 16px) {
  @return ($px / $base) * 1em;
}

.text {
  font-size: px-to-em(20px); // 1.25em
}

Partials and Import

scss
// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// _mixins.scss
@mixin flex-center { ... }

// _buttons.scss
.button { ... }

// main.scss
@import 'variables';
@import 'mixins';
@import 'buttons';

Inheritance

scss
%flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @extend %flex-center;
}

.card {
  @extend %flex-center;
}

Conditionals

scss
$theme: 'dark';

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

Loops

scss
// Each loop
$colors: ('primary': #3498db, 'secondary': #2ecc71, 'accent': #e74c3c);

@each $name, $color in $colors {
  .button-#{$name} {
    background-color: $color;
  }
}

// For loop
@for $i from 1 through 5 {
  .mt-#{$i} {
    margin-top: #{$i * 8px};
  }
}

// While loop
$i: 1;
@while $i <= 5 {
  .p-#{$i} {
    padding: #{$i * 8px};
  }
  $i: $i + 1;
}

Maps

scss
// Define map
$breakpoints: (
  'sm': 640px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1280px
);

// Get value
$md-breakpoint: map-get($breakpoints, 'md');

// Loop through map
@each $name, $value in $breakpoints {
  @media (min-width: $value) {
    .container-#{$name} {
      max-width: $value;
    }
  }
}

Best Practices

1. 1Use partials (files starting with _) for organization
2. 2Create variable files for colors, fonts, spacing
3. 3Use meaningful variable names
4. 4Nest only 3-4 levels deep
5. 5Use mixins for reusable CSS
6. 6Use functions for calculations
7. 7Organize files by component or feature

Conclusion

SASS/SCSS makes CSS maintainable and scalable. Master variables, nesting, and mixins to write better stylesheets.