Mixin transform SASS

Mixin transform SASS
Mixin transform SASS

Los mixins de SASS nos ayudan, facilitándonos la tarea, de escribir tanto código y con solo añadir un mixin, el compilador se encarga de añadir todo el código. Aprende como crear el mixin de la propiedad CSS transform.

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); }

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *