My Sass toolbox

When I first got in contact with Sass couple of 4–5 years ago my first reaction was that it was one more “hipster trendy BS” that is invented just for sake of invention. I was so wrong.

As usual, until you don’t dig into something you cannot discover it’s real nature, so I needed some time to learn how much Sass can be useful and after some time it became my primary weapon of choice.

Developer is the one who profits most of Sass. Real worth in Sass lies in it’s nature that decrease chaos and brings order to your project, as well as way of thinking. I would say that Sass is a component that bring CSS closer to programing.

Using it for years now, I came to some standard toolbox that I’d like to share. I have no doubts that every developer has it’s own toolbox, so purpose of this article is not reinventing the wheel.

Prefixer

If you have no plans to use PostCSS or some other tool that can do dirty work for you (speaking about adding vendor prefixes) you may find this usable:

@mixin prefix($property, $value) {
 -webkit-#{$property}: #{$value};
 -moz-#{$property}: #{$value};
 -ms-#{$property}: #{$value};
 -o-#{$property}: #{$value};
 #{$property}: #{$value};
}

You call it latter as:

@include prefixer(‘border-radius’, $value);

Box Sizing

Although it’s almost standard practice to solve box-sizing issue on all elements with something like this:

* { box-sizing: border-box; }

I don’t find it pretty and I like to use it only when needed. So here’s mixin for it:

@mixin box-sizing($value) {
 @include prefixer(‘box-sizing’, $value);
}

So when you want to use this mixin, just include:

@include box-sizing(border-box);

Note that you will need “Prefixer” for this.

HiDpi Media Queries

CSS has a great way to determine screen density which is needed in some cases. Here’s a simple mixin for it:

@mixin hidpi($ratio: 1.3) {
 @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
 only screen and (min — moz-device-pixel-ratio: $ratio),
 only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
 only screen and (min-resolution: round($ratio * 96dpi)),
 only screen and (min-resolution: $ratio * 1dppx) {
 @content;
 }
}

And usage is so simple:

@include hidpi(1.3)

Background Image

This one is particularly useful, since it’s common to deal with a lot of background images while converting design to HTML.

mixin background-image($file, $type, $width, $height, $position, $repeat, $retina: false) {
 background-image: url($image-path + $file + ‘.’ + $type);
 background-position: $position;
 background-repeat: $repeat;
 background-size: $width $height;
 @if ($retina == true) {
  @include hidpi(1.3) {
   background-image: url($image-path + $file + ‘-2x.’ + $type);
  }
 }
}

And use it like:

@include background-image(logo, png, 100px 100px, center, no-repeat, true);

So, what is going on here? You pass parameters to mixin as following: image name, extension, background size (it may be “cover” or “contain”, too, not just numerical values), background position, repeat. Last parameter is true/false for high-density screen image. In other words if you want to have two versions of same image (usually “image.jpg” and “image-2x.jpg”) you will go for “true”.

Note that this mixin requres “hidpi mixin”. Also, you will need to define “$image-path” (I use it as variable, so if environment is changed it is easy to change it). Of course, you can use hardcoded path here, too.

Breakpoints

There are a lot of arguing about approach to determination of breakpoints and I will say that best solution is the one that works for you. This is the one I use often:

$phone: 360px;
$phablet: 580px;
$tablet: 768px;
$tablet-landscape: 1024px;
$desktop: 1200px;
@mixin breakpoint($class) {
 @if $class == phone {
  @media (max-width: $phone) { @content; }
 }
 @else if $class == phablet {
  @media (max-width: $phablet) { @content; }
 }
 @else if $class == tablet {
  @media (max-width: $tablet) { @content; }
 }
 @else if $class == tablet-landscape {
  @media (max-width: $tablet-landscape) { @content; }
 }
 @else if $class == desktop {
  @media (max-width: $desktop) { @content; }
 }
 @else if $class == xl-desktop {
  @media (min-width: $desktop + 1) { @content; }
 }
}

So when you want to target breakpoint for the element, just use:

@include breakpoint(tablet) {}

Vertical Alignment

Vertical alignment can really be pain in the neck, so here’s a simple mixin to help you out. Only thing need for this to work is to have height on parent element. Without it, this will fail.

@mixin vertical-align {
 position: relative;
 top: 50%;
 @include css3-prefix(‘transform’, translateY(-50%));
}

Usage is simple:

@include vertical-align;

Transitions

I particularly like CSS transitions for giving details and small touch that can enhance UX and make website more appealing.

@mixin transition($value) {
 @include prefixer(‘transition’, $value);
}

To use it, just call:

@include transition(all .3s ease);

Note that you will need “Prefixer”.

Box Shadow

If you are tired of remembering all stuffs that goes under box-shadow, this one will help you:

@mixin box-shadow($x, $y, $b, $s, $color ) {
 @include prefixer(‘box-shadow’, $x $y $b $s $color);
}

Usage is simple as:

box-shadow(10px, 10px, 5px, 0px, rgba(0,0,0,.5);

For those how are interested in more, please visit https://github.com/ZoranPerin/Sass-Mixins and find full collection of mixins.

Thanx for reading!