Skip to main content

SCSS Recipes for Faster Theming

Dec 13 '16

SASS recipes

There are so many benefits to designing and building sites based on components, rather than pages. But when it comes to theming it can be repetitive at times. Here are some SCSS recipes to help you speed that up and keep your SCSS organized!


Maps are a data-type that represent key-value pairs. Typically you use them to easily organize related values. Breakpoints, z-index, and colors are perfect for maps. Here are a few examples:


  $breakpoints: (
    sm: 400px,
    md: 700px,
    lg: 900px,


This allows you to create a mixin like so:

  @mixin mq($breakpoint) {
    // Goes to $breakpoints map and gets each $breakpoint value (if any)
    @if-map-has-key($breakpoints, $breakpoint) {
      // Create a media query based on that $breakpoint value
      @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
    @else {
      @warn "Breakpoint doesn't exist, please check breakpoints map."


Now you can use it in your SCSS like so:

  body {
    font-size: 1em;
    @include mq(md) {
      font-size: 1.8em;


Better Z-Index management

  $z-layers: (
    under: -1,
    default: 1,
    overlay: 2,
    modal: 3,
  @function z($layer) {
    @function z($layer) {
      @if not map-has-key($z-layers, $layer) {
        @warn "No layer found for `#{$layer}` in $z-layers map.";
      @return map-get($z-layers, $layer);


The function above allows you to call a function called `z()`. Like so:

  .my-modal {
    z-index: z(modal);


Easy Color Variations

  $banner-colors: (
    'green':        #84DCC6,
    'green-darker': #A5FFD6,
    'pink':         #FFA69E,
    'pink-darker':  #FF686B,
  // Create your variations
  @each $color, $hex in $banner-colors {
    .banner.banner-color--#{$color} {
      background-color: $hex;
  // If you named your color variables the same as your variations you will get the following CSS as ouput
  .banner.banner-color--green {
    background-color: #84DCC6;
  .banner.banner-color--green-darker {
    background-color: #A5FFD6;
  .banner.banner-color--pink {
    background-color: #FFA69E;
  .banner.banner-color--pink-darker {
    background-color: #FF686B;


Better Active States

You can simplify hover/focus/active styles with this small mixin.

  @mixin is-active {
    &.is-active {


Absolute Centering

If you don't have to worry about legacy browsers (and I hope you don't). You can absolutely center or vertically center anything using these mixins. I prefer mixins in this example because they work inside media queries as well. Extends don't.

  // Center horizontally and vertically. Be sure to set a z-index.
  @mixin absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  @mixin vertical-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);


Accessible Hide Text

For those occasions when you need to replace text with an icon and want to keep things accessible. Keep in mind you will have to override the font when you want to use pseudo-elements.

  @mixin hide-text {
    color: transparent;
    font: 0/0 serif;