Auto-prefix en Sass

5/mar/2014 0

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

Deja tu Comentario

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

CSSLab