Advanced SCSS: Beyond the Basics

Maps, control directives, placeholder selectors, and patterns for larger projects. You should be comfortable with variables, mixins, and basic nesting before starting here.

Advanced variables and maps

Maps store key-value pairs. They are useful for managing groups of related variables – colour themes, breakpoint sets, spacing scales.

Example: using maps for theme management

$themes: (
  light: (
    primary: #555,
    secondary: #ddd
  ),
  dark: (
    primary: #eee,
    secondary: #222
  )
);

@mixin theme-colors($theme-name) {
  $theme-map: map-get($themes, $theme-name);

  body {
    background-color: map-get($theme-map, primary);
    color: map-get($theme-map, secondary);
  }
}

@include theme-colors(dark);

A map holds the colour themes. The mixin pulls out the right one and applies it.

Advanced mixins and functions

Mixins can include logic. Functions can do calculations. Together they let you generate CSS based on conditions or inputs.

Example: responsive mixin

@mixin respond-to($breakpoint) {
  @if $breakpoint == 'phone' {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == 'tablet' {
    @media (max-width: 900px) { @content; }
  }
}

.container {
  @include respond-to('tablet') {
    padding: 10px;
  }
}

Pass a breakpoint name and the mixin wraps your styles in the right media query.

Control directives

SCSS supports @if, @for, @each, and @while for adding logic to your stylesheets.

Example: looping with @for

@for $i from 1 through 12 {
  .col-#{$i} { width: 100% / 12 * $i; }
}

Generates a simple 12-column grid without writing each class by hand.

Placeholder selectors

Placeholder selectors (%) work with @extend but produce no CSS until something extends them. Cleaner than extending a regular class.

Example

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

.content {
  @extend %flex-center;
}

%flex-center outputs nothing on its own. .content picks up its properties when compiled.

Modularising your SCSS

As projects grow, split styles into partials organised by purpose: base, components, layouts, utilities. One folder per concern keeps things manageable.

Advanced nesting

Nesting should stay shallow, but the parent selector (&) is genuinely useful for BEM-style modifiers.

Example: parent selector referencing

.btn {
  &-primary { background-color: blue; }
  &-secondary { background-color: green; }
}

Compiles to .btn-primary and .btn-secondary.

SCSS in JavaScript frameworks

React, Vue, and similar frameworks support SCSS in component files. Vue’s scoped styles keep component CSS from leaking out.

Example: scoped SCSS in Vue

<template>
  <div class="my-component">Hello</div>
</template>

<style lang="scss" scoped>
.my-component {
  color: $primary-color;
}
</style>

The scoped attribute limits these styles to this component.

Performance

Advanced features make it easier to generate a lot of CSS. Watch for deep nesting, heavy @extend use, and selectors that are more complex than they need to be.

Debugging and testing

More complex SCSS means trickier debugging. Source maps and linters become more important as your stylesheets grow.

These features are powerful when you need them. Start simple, add complexity only where it saves real work, and keep an eye on what compiles out the other end.