More Useful Sass Mixins

Filed under Sass

It uses variables, partials, inheritance, maps, if statements, nesting and mixins to make your css faster to create, and easier to maintain. We're going to go over some useful mixins that you can include on your next project. If you're new to sass, you should head on over to the basics page to learn more.

Don't forget, if you're fine with using some of the default variables and want to skip to a later one, you can define the variable name when including it. For example @include position($left: 4px);

The Mixins

Font anti-aliasing

Make the browser emphasize legibility over rendering speed and geometric precision. This enables kerning and optional ligatures. Read more about optimizeLegibility.

And for OSX Only, improve the visibility of fonts in some instances. Read more about font-smoothing for webkit and moz-osx.

@mixin legibility {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

Easy links

Useful for setting the colour of links easily. You'll want to at least specify a $link and $hover colour here.

// Simple link colouring
@mixin links($link: '#7ab4e5',  $hover: '#e62c25', $active: 'lighten($hover, 10%)', $focus: $hover, $visited: $link) {
  &:link    { color: $link;    }
  @if $visited {
    &:visited { color: $visited; }
  } @else {
    &:visited { color: $link; }
  }
  &:hover   { color: $hover;   }
  &:active  { color: $active;  }
  &:focus   { color: $focus;   }
}

Position

A cleaner way to set the position of elements. Follows the standard CSS shorthand ordering.

// Don't forget that order matters in CSS, so this will overwrite or be overwritten depending on position.
// Use `auto` to set to default.
// North, East, South, West
@mixin position($type: relative, $top: null, $right: null, $bottom: null, $left: null) {
  position: $type;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

Truncate Text/ Hyphenate

In some rare instances you'll want to truncate a string of text to a single line, or have large paragraphs break on words (and hyphenate between lines). Be careful with truncating, in most instances it's better to revise your content instead of hiding it from the user.

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin hyphens {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}

Alignment

Align an element either horizontally, vertically or both using the Transform property.

// You should be using an autoprefixer as part of your build process
// https://github.com/postcss/autoprefixer
// Requires a `position` to be given to the parent container.
// Something looking a little blurry, add `transform-style: preserve-3d` to the parent container.

@mixin align($position: relative, $align: both){
  position: $position;
  @if $align == vertical {
    top: 50%;
    transform: translateY(-50%);
  } @else if $align == horizontal {
    left: 50%;
    transform: translateX(-50%);
  } @else {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

Center Block

Set an element to block and center the contents.

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Override Bourbon

If you're using an autoprefixer and bourbon as part of your build system you may want to override the bourbon mixins as they can muck-up in some instances.

// If you're using bourbon, include this afterwards to disable it's vendor prefixing, and let your build system do the work.
// https://github.com/postcss/autoprefixer
@function linear-gradient($value...) {
  @return unquote('linear-gradient(#{$value})');
}

@function radial-gradient($value...) {
  @return unquote('radial-gradient(#{$value})');
}
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.