Menu

Style: Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

You can edit mixins in mixins.scss.

Mixins for CSS transform

What you have in mixins.scss
@mixin translateX($translateX)
{
  -webkit-transform: translateX($translateX);
  -moz-transform: translateX($translateX);
  -o-transform: translateX($translateX);
  transform: translateX($translateX);
}
What you code
.class {
  @include translateX(57px);
}
What you get after compilation
.class {
  -webkit-transform: translateX(57px);
  -moz-transform: translateX(57px);
  -o-transform: translateX(57px);
  transform: translateX(57px);
}

Mixins for Flex

What you have in mixins.scss
@mixin flex-order($order)
{
  -webkit-box-ordinal-group:$order + 1;
  -webkit-order:$order;
  -ms-flex-order:$order;
  order:$order;
}
What you code
.class {
  @include flex-order(1);
}
What you get after compilation
.class {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

Mixins for position

What you have in mixins.scss
@mixin position($position, $top, $right, $bottom, $left) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
What you code
.class {
  @include position(absolute, 50px, 18px, auto, auto);
}
What you get after compilation
.class {
  position: absolute;
  top: 50px;
  right: 18px;
  bottom: auto;
  left: auto;
}