My favorite tricks with Sass

1. Dynamically create component variants based on theme colors

// Create a map containing all the important colors
$theme-colors: (
  "danger": #ff0000,
  "success": #00ff00,
  "info": #0000ff,
) !default;

// Loop through the map to create a variant per color
.button {
  // ...

  @each $colorName, $color in $theme-colors {
    &--#{$colorName} {
      background: $color;
      // ...
    }
  }
}

CSS result

.button--danger {
  background: #ff0000;
}

.button--success {
  background: #00ff00;
}

.button--info {
  background: #0000ff;
}

2. Pick the right text color automatically

@function text-color($color) {
  @if (lightness($color) > 40) {
    @return #000;
  } @else {
    @return #fff;
  }
}

// Use the function anywhere
.button--primary {
  background: #ff0000;
  color: text-color(#ff0000);
}

CSS result

.button--primary {
  background: #ff0000;
  color: black;
}

3. Simplify the use of breakpoints

// Create a map containing your breakpoints
$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
) !default;

// Create a mixin to simplify the use of the breakpoints
@mixin breakpoint-down($screen-size) {
  $breakpoint-size: map-get(
    $map: $breakpoints,
    $key: $screen-size,
  );

  @media (max-width: $breakpoint-size) {
    @content;
  }
}

// Use the breakpoints anywhere
.square {
  width: 100px;
  @include breakpoint-down(sm) {
    width: 50px;
  }
}

CSS result

.square {
  width: 100px;
}

@media (max-width: 576px) {
  .square {
    width: 50px;
  }
}

4. Simplify the use of spacers

// Create a map containing you spacings
// Name them from 0 to n
$spacers: (
  0: 0,
  1: 0.5rem,
  2: 1rem,
  3: 1.5rem,
  4: 2rem,
  5: 3rem,
) !default;

// Create a function to simplify the use of the spacers
@function getSpace($space) {
  @return map-get($map: $spacers, $key: $space);
}

// Use the function anywhere
.square {
  margin-top: getSpace(0);
  margin-bottom: getSpace(5);
}

CSS result

.square {
  margin-top: 0;
  margin-bottom: 3rem;
}