sass-toolbox

Toolbox for Sass

A set of reusable mixins and placeholders for front-end development.

Just import the file:

@import "toolbox";

Includes

By including toolbox.scss these are automatically added to your compiled CSS file. These are good safe defaults that can (and probably should) be used on each project. As a result they don't need to be called in your Sass.

Box Sizing

Using border-box sizing makes so much more sense nowadays and saves a lot of unnecessary math. This is courtesy of Paul Irish.

Placeholders

Using Sass placeholders multiple times results in comma-separated selectors at compilation time. This makes them great for storing chunks of reusable code that don't require input or variation.

Delist

Removes padding and list-style from a list.

@extend %delist;

Fill

Fills/covers the container. Ideal for a modal.

@extend %fill;

Hide Text

Uses Zeldman's old image replacement technique to hide text.

@extend %hide-text;

Vertical Align

Although flexbox solves vertical alignment once-and-for-all, this is still a neat trick to vertically center in the unknown.

@extend %vertical-align;

Mixins

Breakpoint

A simple way to write mobile first media queries. There are loads of great (but overly complex) solutions out there, but this (combined with variables), works for me.

@include breakpoint(30em){
  font-size: 2em;
}

Context

This has the potential to get messy, but is useful for global overrides, i.e. site color change. Pass in the contextual classname:

main {
  background: white;

  @include context('dark') {
    background: dark;
  }
}

And it will return:

.dark .main {
		background: dark;
	}

EM

An easy to way to convert to EMs from px (not that you should think in pixels at all). The first argument is the pixel value, the second (optional) value the context, e.g. the element font-size if it isn't equal to the base size.

.container {
	  padding: em(48px);
	}

REM

The jury is still out on this one. Nevertheless REM sizing is a neat idea and can be useful when dealing with an inconsistent EM size.

@include rem(font-size, 14);

This provides a fallback for browsers that don't yet support the REM unit.