Sep 21, 2022

Short and useful SCSS Mixins, Part 2

Some more short and useful SCSS helpers to make development easier and cleaner.

Capitalization

@function capitalize($string) {
  @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}

This will capitalize a given string, useful for generating automatic helper classes.

Color Helpers

For some things like text colors, having some Tailwind CSS-esque helper classes can be quite useful.

$colors: (
  'red': $color-red,
  'green': $color-green,
  'blue': $color-blue,
);

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

This will create helper classes like color-red or bg-green.

Spacing Helpers

We can take this a step farther and generate a host of margin and padding helper classes:

$spacing-base: 4px;

$directions: (
  'top',
  'right',
  'bottom',
  'left',
);

@for $size from 1 through 10 {
  .u-margin#{$size} {
    margin: #{$spacing-base * $size};
  }

  .u-padding#{capitalize($direction)}#{$size} {
    padding: #{$spacing-base * $size};
  }

  @each $direction in $directions {
    .u-margin#{capitalize($direction)}#{$size} {
      margin-#{$direction}: #{$spacing-base * $size};
    }

    .u-padding#{capitalize($direction)}#{$size} {
      padding-#{$direction}: #{$spacing-base * $size};
    }
  }
}

This will create helper classes like u-marginTop4 or u-padding6.

Typography Classes

It’s also useful to quickly scaffold a typography setup. This really pays off when the screen designers put effort into defining the different components and headline levels:

/* required to make use of the list methods */
@use 'sass:list';

/*
  headline font sizes, from h1 to h6
  keep in mind SCSS uses 1-based indexing!
*/
$fontSizes-headlines: (
  45px,
  40px,
  32px,
  28px,
  24px,
  20px,
);

/* mobile first is still a good paradigm */
$breakpoint-desktop: 1024px;

/* this mixin helps prevent duplicate code */
@mixin headline($level: null) {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  line-height: 1.2;

  /*
    sometimes we want to set a custom size,
    so making the level optional comes in use
  */
  @if $level {
    font-size: list.nth($fontSizes-headlines, $level);
  }
}

@for $level from 1 through 6 {
  h#{$level},
  .t-h#{$level} {
    @include headline($level);
  }

  @media screen and (min-width: $breakpoint-desktop) {
    .t-h#{$level}\@desktop {
      @include headline($level);
    }
  }
}

This will set the appropriate styles for the headline tags h1 through h6, and also create typography helper classes like t-h1 or t-h3@desktop.

Keep in mind that headline levels matter in regard to syntactically correct content, which is important for SEO and accessibility.
But many screen designs you will encounter use the headline levels as style elements, and it makes work easier to keep those in sync with your codebase.

So while it might seem strange to see a declaration like this:

<h1 class="t-h4 t-h2@desktop">
  My Page Title
</h1>

it does make sense.
Just keep in mind that syntactical headline level and design headline level are two separate things.