En este sinippet, Explicamos como crear el mixin de SASS, de la propiedad CSS transform. Que gracias a este lenguaje de programación, compilar CSS, es mucho mas facil.
Trabajando con mixins en SASS, te ahorraras, mucho tiempo, sin tener que teclear tanto código. Es muy cómodo y muy agradecido.
Veamos entonces, como crear el mixinn y despues como aplicarlo.
SASS
// Mixin transform
@mixin transform($transforms) {
-webkit-transform: $transforms;
-moz-transform: $transforms;
-ms-transform: $transforms;
-o-transform: $transforms;
transform: $transforms;
}
// Rotate
@mixin rotate($deg) { @include transform(rotate(#{$deg}deg)); }
// Rotate3D
@mixin rotate3d($x, $y, $z, $deg) { @include transform(rotate3d($x, $y, $z, #{$deg}deg)); }
// Scale
@mixin scale($scale) { @include transform(scale($scale)); }
// Translate
@mixin translate($x, $y) { @include transform(translate($x, $y)); }
// TranslateX
@mixin translateX($x) { @include transform(translateX($x)); }
// TranslateY
@mixin translateY($y) { @include transform(translateY($y)); }
// Translate 3D
@mixin translate3d($x, $y, $z) { @include transform(translate3d($x, $y, $z)); }
// Skew
@mixin skew($x, $y) { @include transform(skew(#{$x}deg, #{$y}deg)); }
Aquí, puedes ver, como incluir el mixin a tus clases, de tu archivo SASS.
SASS
// Rotate
.capa-rotate { @include rotate(50); }
// Rotate3D
.capa-rotate3d { @include rotate3d(0, 90, 0, 180); }
// Scale
.capa-scale { @include scale(20); }
// Translate
.capa-translate { @include translate(50px, 50px); }
// TranslateX
.capa-translate-x { @include translateX(50px); }
// TranslateY
.capa-translate-y { @include translateY(50px); }
// Translate 3D
.capa-translate-3d { @include translate3d(50px, 50px, 50px); }
// Skew
.capa-skew { @include skew(100, 100); }
Si te ha sido útil este snippet, te agradecería dejases un comentario, mas abajo. Gracias