Useful Sass Mixins

Filed under Sass

A handful of mixins to supplement your collection

I'm including a couple mixins that I've found very handy, I'll be updating this as I come across new ones too.

Responsive Breakpoints

Media queries are the core behind responsive sites, and allow us to control the page at different points to a great degree. Using a SASS mixin we can define a set of points where we want to change something, and call upon it with a single line when necessary.

Replace the $point names with whatever you prefer. I'd advise not targeting certain device sizes because of typically how quick hardware evolves, but rather general points which won't break when hardware changes.

Mixin

@mixin break($point) {
  @if $point == large {
    @media (max-width: 1600px) { @content; }
  }
  @if $point == standard {
    @media (max-width: 1024px) { @content; }
  }
  @if $point == medium {
    @media (max-width: 939px) { @content; }
  }
  @else if $point == small {
    @media (max-width: 767px) { @content; }
  }
  @else if $point == smaller {
    @media (max-width: 650px) { @content; }
  }
  @else if $point == portrait {
    @media (max-width: 480px)  { @content; }
  }
}

Usage

.class {
  background-color: red;
  @include breakpoint(smaller){
    background-color: blue;
  }
}

Colour Swatches

These are a nice thing to have when starting a new template, a good set of colour swatches. Trim them back as necessary.

Variables

$turquoise: rgb(26, 188, 156);
$greensea:rgb(22, 160, 133);
$emerald: rgb(46, 204, 113);
$neptulon: rgb(39, 174, 96);
$river: rgb(52, 152, 219);
$belize: rgb(41, 128, 185);
$amethyst: rgb(155, 89, 182);
$violet: rgb(142, 68, 173);
$wet: rgb(52, 73, 94);
$midnight: rgb(44, 62, 80);
$slate: rgb(65, 71, 89);
$sunflower: rgb(241, 196, 15);
$tangerine: rgb(243, 156, 18);
$orange: rgb(255, 142, 37);
$carrot: rgb(230, 126, 34);
$pumpkin: rgb(211, 84, 0);
$strawberry: rgb(231, 76, 60);
$pomegranate: rgb(192, 57, 43);
$orangered: #CF4A1F;
$fluffy-clouds: rgb(245, 246, 247);
$clouds: rgb(236, 240, 241);
$dark-clouds: rgb(106, 106, 106);
$silver: rgb(189, 195, 199);
$concrete: rgb(149, 165, 166);
$morningfog: rgb(127, 140, 141);

To use these just call them like you would any other variable.

Horizontal List

You might find yourself using horizontal lists quite often, almost every site uses it in one form or another. Use this mixin on a OL or UL to set it switch it flat whenever necessary.

Mixin

@mixin horizontal-list($list-margin: 0 8px 0 0) {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  li {
    display: inline-block;
    position: relative;
    margin: $list-margin;
    padding: 0;
    &:last-of-type {margin-right: 0;}
    a {
      display: inline-block;
    }
  }
}

Usage

ul#nav {
  @include horizontal-list;
}

Font Size

Rem Unit sizing (root em) let's us base all our font sizes after the font size defined on the body. What we can do is set our body to font-size: 62.5% /*base 10*/, this sets 1 rem to equal 10px. So when modifying the font size, just use decimals to adjust. This mixin includes a fallback for px sizing and a line estimation.

Mixin

@mixin font-size($size:$font-size, $line: $size * 1.5){
    font-size:   ($size * 10) + px;
    line-height: ($line * 10) + px;
    font-size:   $size + rem;
    line-height: $line + rem;
}

Usage

@include font-size(1.5)

Buttons

Typically the same styled buttons will be used throughout the site, this is another good opportunity to use mixins to save some time. Adding classes to links can work, but makes it harder to modify per instance. I've included the mixin I use for buttons on this site. Appropriately named pushbutton.<

Mixin

@mixin pushbutton($colour: $orange, $font-colour: rgb(255,255,255)) {
  color: $font-colour;
  text-shadow: 0 1px 0 darken($colour, 10%);
  line-height: 1;
  padding: 6px 40px;
  position: relative;
  display: inline-block;
  border: 1px solid $colour;
  border-radius: 4px;
  background-color: darken($colour, 10%);
  box-shadow: 0 4px 0 darken($colour, 20%);
  @include transition(all .1s linear);
  &:hover {
    border-color: $colour;
    color: mix($colour, $font-colour, 10%);
  }
  &:focus {
    border-color: darken($colour, 30%);
  }
  &:active {
    border-color: darken($colour, 20%);
    bottom: -4px;
    box-shadow: none;
  }
}

Usage

a.calltoaction {
  @include pushbutton(orange, #FFFFFF);
}

Bourbon

Bourbon is an amazing, lightweight library of precompiled sass mixins that I would recommend having a look at.

Neat

A complement to Bourbon, built by the same team. It's a grid framework built to be used with Sass and Bourbon that promotes clean, semantic markup. You don't need 50 presentation classes, and divs wrapped in divs wrapped in divs. It's just so damned… neat.

That's it from me, hopefully you'll find them useful as a starting point to building your own mixins to suit your workflow. So have a fiddle, and enjoy.

Published

Knock out two birds with one stone by saving your latest commit message to Harvest

You should be using h2 (HTTP/2) and HTTPS and compelling reasons to make the switch to HTTPS if for you still haven’t.