Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



14 Commits

Repository files navigation

SCSS Utils

Small set of mixins and extendable classes for the most basic SASS Stuff. I recommend you use it with LibSass as it is screaming fast.

This is basically a subset of Bourbon along with a couple of things that Bourbon didn't have.


Several ways to do this. Two are listed below:

NPM Install It

npm install scss-utils --save-dev

If you do it this way, you can use with node-sass. Just use --include-path node_modules/scss-utils/.

Drag and Drop It

  1. Go to the releases page.
  2. Click the button to download a zip.
  3. Decompress and drop in your SCSS folder.


Whatever install method you used, now you can just:

@import 'scss-utils';


Mixin Arguments
appearance $value
animation $animations...
box-shadow $shadow
calc $property, $value
clearfix none
keyframes $name
placeholder none
prefixer $property, $value, $prefixes
respond-to $max, $mi, $type
transform $property
transform-origin $axes
transform-style $style
transition $value
transition-prefixed $value
transition-property $value
transition-duration $value
transition-timing-function $value
transition-delay $value
visible none
invisible none
hide none


The animation mixin allows you to declare cross-browser animations:

box:hover {
  @include animation(scale 1.0s ease-in, slide 2.0s ease);

Or, use individual animation mixins:

box:hover {
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);


The appearance CSS property is used to display an element using a platform-native styling based on the operating system's theme. For example, to remove browser specific styling for a ui element, use:

@include appearance(none);


Set the box-shadow property for all browsers (with browser prefixes):

@include box-shadow(10px 10px 5px #888888);


Shorthand for setting a property to use a calc value. Pass the property you'd like to set, then the value you'd like to use:

@include calc(width, '100px - 10%');


Applies a clear for floated elements:

@include clearfix();


For creating animations, you can use the keyframes mixin. This mixin accepts an animation name. Then inside the mixin, write your animation as a content block:

@include keyframes(ANIMATION_NAME) {
  0%   { background-color: #ffccf2; }
  100% { background-color: #ccffff; }

Now you can use the animation mixin as a named animation like this:

.animation-class {
  @include animation( @include animation(ANIMATION_NAME 200ms ease-in);)


Write styles for placeholder attributes:

.my-input {
  @include placeholder(){
    color: red;

You can obviously use this outside of a class as well to style all placeholders.


This is one of the most flexible mixins in the library. Use it to add browser prefixes to a property:

@include prefixer(margin-end, 5%, webkit moz spec);

In this way you can prefix any property. Adding the spec as the last argument will also output the property without a prefix.

Respond To

The respond-to mixin adds media queries for use in responsive design. The mixin accepts three arguments: maximum size, minimum size, and type (screen, print, etc). You can pass just the first out of convenience. This mixin works well if you save your breakpoints as variables:

.my-div {
  @include respond-to($small){
    padding: 1rem;

This will compile to the following css:

@media screen and (max-width: 480px) {
  .my-div {
    padding: 1rem;

You can assemble more complicated media queries by using both min and max:

@include respond-to($large, $medium) { ... }

This will add styles that only appear between the $medium and $large screen sizes.


The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set. transform, transform-origin, and transform-style all add the necessary browser prefixes for interacting with their respective transform properties.

@include transform(translateY(50px));
@include transform(scale(0.9) rotate(-3deg));
@include transform-origin(center top);
@include transform-style(preserve-3d);


This mixin provides a shorthand syntax and supports multiple transitions.

@include transition(all 2.0s ease-in-out);
@include transition(opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);

Or you can use the individual transition properties:

@include transition-property(transform);
@include transition-duration(1.0s);
@include transition-timing-function(ease-in);
@include transition-delay(0.5s);

Transition Prefixed

To transition vendor-prefixed properties, e.g. -webkit-transform and -moz-transform, there is an additional convinience transition-prefixed() mixin:

@include transition-prefixed(transform3d(0,0,0) 200ms linear);

This will generate vendor prefixed properties and values.


The visibility mixins change the visibility property. This is useful for removing and adding elements at certain breakpoints or with certain class names. No arguments are passed. Invisible sets visibility: hidden on the object, leaving in the in document flow, but removing it from view. hide() will completely remove the item with display:none.

@include hide();
@include invisible();
@include visible();