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 scss-utils --save-dev
If you do it this way, you can use with node-sass. Just use --include-path node_modules/scss-utils/
.
- Go to the releases page.
- Click the button to download a zip.
- 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.
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);
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();