Auto-prefix en Sass

5/mar/2014 1

Utilizar pre-procesadores CSS se ha vuelto una necesidad en la actualidad, ya que sus múltiples ventajas hacen que no exista excusa para seguir escribiendo CSS puro. Lo mejor es que no intervenimos el lenguaje, sólo lo escribimos más eficiente.

Ahora les presento un útil mixin para Sass que ayuda a lidiar con los prefijos propietarios de algunas propiedades CSS3. Mientras de a poco los fabricantes de browsers los van eliminando, aún tenemos que utilizarlos por compatibilidad retroactiva.

Mixin:

$prefixes: "webkit", "moz", "ms", "o", "none";
@mixin prefix($property, $arguments) {
 @each $prefix in $prefixes {
   @if $prefix == "none" {
     #{$property}: $arguments;
   } @else {
     -#{$prefix}-#{$property}: $arguments;
   } 
 }
}

Uso:

elemento {
  @include prefix(propiedad, valor);
}

En el browser renderiza:

elemento {
  -webkit-propiedad: valor;
  -moz-propiedad: valor;
  -ms-propiedad: valor;
  -o-propiedad: valor;
  propiedad: valor;
}

Comentarios

  1. JOSUE EDUARDO GONZALEZ [#]

    Gracias, la verdad no había leido bien los docs de sass yo hacia algo con variables para cada propiedad y era realmente fastidioso pero gracias a tu post me ahorrare tiempo y me motiva a terminar de aprender sass de forma correcta

Deja tu Comentario

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

CSSLab