sass-toolbox v1.0.1
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.