SCSS

Variables

• Variables store reusable values and help maintain consistency across your stylesheets

$primary-color: #000000;

body {
  color: $primary-color;
}

Nesting

• Nesting allows you to nest selectors within other selectors, mirroring the HTML structure

.nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}

Partials and Import

• Break your SCSS code into smaller, manageable files called partials and include them using @import

// Prefix partial filenames with an underscore (e.g., _variables.scss), SCSS won't compile these into separate CSS files
@import "variables";

Mixins

• Mixins allow you to define reusable blocks of styles

@mixin mx($space) {
  margin-left: $space;
  margin-right: $space;
}

.button {
  @include mx(1rem);
}

Extend/Inheritance

• Use @extend to share styles between selectors, reducing code duplication

%button-base {
  padding: 1rem 1.5rem;
}

.button-primary {
  @extend %button-base;
  background-color: $primary-color;
}

.button-secondary {
  @extend %button-base;
  background-color: $secondary-color;
}

Operators

• Perform mathematical calculations directly in your stylesheets

  • Arithmetic Operators: +, -, *, /, %
  • Comparison Operators: ==, !=, <, >, <=, >=
  • Boolean Operators: and, or, not

.operator {
  padding-top: 1rem + 1; // 2rem
  padding-bottom: 1rem - 1; // 0rem
  padding-left: 1rem * 2; // 2rem
  padding-right: (1rem / 2); // 0.5rem
}

Custom Functions

• Define your own functions using @function

@function pow($base, $exponent) {
  $result: 1;
  @for $i from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.square {
  width: pow(4, 2) * 1px; // Returns 16px
}

Control Directives

• Add logic to your stylesheets

@if, @else if, @else

$theme: "dark";

.color {
  @if $theme == "dark" {
    background-color: #000;
  } @else if $theme == "light" {
    background-color: #fff;
  } @else {
    background-color: gray;
  }
}

@for Loop, @each Loop, @while Loop

// For Loop
@for $i from 1 through 3 {
  .col-#{$i} {
    width: (100% / 3) * $i;
  }
}
// Each Loop
$icons: icon-home, icon-user, icon-settings;

@each $icon in $icons {
  .#{$icon} {
    background-image: url("/images/#{$icon}.png");
  }
}
// While Loop
$i: 6;

@while $i > 0 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i - 1;
}

Interpolation

• Inject variables into selectors and property names using #{}

$size: "large";

.icon-#{$size} {
  font-size: 2em;
}

Comments

• Single-line Comments (not included in the compiled CSS)

// This comment will not appear in the CSS

• Multi-line Comments (included in the compiled CSS)

/* This comment will appear in the CSS */

Maps

• Store related data in key-value pairs using maps

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px,
);

Selector Functions

• Manipulate selectors for advanced styling

.button {
  background-color: #101010;

  &:hover {
    background-color: lighten(#101010, 10%);
  }
}

Built-in Functions

SCSS provides a rich set of built-in functions categorized into several groups. The following tables summarize these functions for quick reference.

Color Functions

Number Functions

String Functions

List Functions

Map Functions

Selector Functions

Introspection Functions

Miscellaneous Functions

Useful Custom SCSS Functions

• Below are custom SCSS functions that extend beyond the built-in capabilities

strip-units

• Removes units from a number, returning a value without unit

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

rem

• Converts pixel values to rem units based on the base font size

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