sass-mixins

Sass Mixins Library

Mixins

• box-sizing
• transition
• translateY
• user-select

Flex Mixins

• align-items
• inline-flex
• justify-content

box-sizing

@include box-sizing($value)

@mixin box-sizing($value) {
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
  box-sizing: $value;
}

transition

@include transition($args...)

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  transition: $args;
}

translateY

@include translateY($value)

@mixin translateY($value) {
  -webkit-transform: translateY($value);
  -moz-transform: translateY($value);
  -ms-transform: translateY($value);
  transform: translateY($value);
}

user-select

@include user-select($value)

@mixin user-select($value) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}

align-items

@include align-items($value)

@mixin align-items($value) {
  -webkit-box-align: $value;
  -moz-box-align: $value;
  -ms-flex-align: $value;
  -webkit-align-items: $value;
  align-items: $value;
}

inline-flex

@include inline-flex

@mixin inline-flex {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

justify-content

@include justify-content($value)

@mixin justify-content($value) {
  -webkit-justify-content: $value;
  -moz-justify-content: $value;
  justify-content: $value;
}