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.

Install

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.

Use

Whatever install method you used, now you can just:

@import 'scss-utils';

Reference

| 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 |

Animation

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);
}

Appearance

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);

Box-Shadow

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

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

Calc

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%');

Clearfix

Applies a clear for floated elements:

@include clearfix();

Keyframes

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);)
}

Placeholder

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.

Prefixer

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.

Transform

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);

Transition

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.

Visibility

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();