mixins.scss
scss mixins syntax of sass
Installation
via npm
npm i mixins.scss --save
via bower
bower install mixins.scss --save
Usage
font-face
@include font-face('yourfontname', '/path/font');
@include font-face('yourfontname', '/path/font', 600);
trans
.foo {
@include trans;
}
.foo {
@include trans(linear);
}
.foo {
@include trans(border-radius .2s ease-in-out);
}
trans-bezier
.foo {
@include trans-bezier(0.25, 0.25, 0.5, 0.1);
}
border
.foo {
@include border(1, $color);
}
.foo {
@include border(5, $color, dotted);
}
bgc
background-color
@include bgc(#009688);
@include bgc((22, 35, 88));
@include bgc((34, 123, 1, .8));
media
.foo {
@include media(xs) {
width: 50%;
}
}
@include media(xs) {
.foo {
width: 50%;
}
}
clearfix
@include clearfix;
text-overflow
@include text-overflow;
overflow-x
@include overflow-x;
unstyled-list
@include unstyled-list;
inline-list
@include inline-list;
unstyled-link
a {
@include unstyled-link;
}
a {
@include unstyled-link(#0b0b0b);
}
hidden
.foo {
@include hidden('invisible');
}
heading
@include heading {
font-family: 'Ubuntu';
color: #ccc;
}
center-block
foo {
@include center-block(70, 20);
}