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
- Go to the releases page.
- Click the button to download a zip.
- 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
Or, use individual animation mixins:
box:hover
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:
Box-Shadow
Set the box-shadow
property for all browsers (with browser prefixes):
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:
Clearfix
Applies a clear for floated elements:
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:
;
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:
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 }
This will compile to the following css:
{}
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.
Transition
This mixin provides a shorthand syntax and supports multiple transitions.
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
.