Mezcla de navegador cruzado usando Sass

1

Soy bastante nuevo en Sass, así que todavía no sé todo al respecto.

Mi idea es que creo un mixin así;

@mixin crossBrowser($css) {
    -webkit-+$css;
    -moz-+$css;
    -o-+$css;
    $css;
}

y luego úselo @include crossBrowser("transition: 0.2s ease-out");.

Creo que puedes ver a dónde estoy tratando de ir aquí, ¿es posible? ¿O tengo que crear un nuevo mixin para cada propiedad CSS3 que quiero incluir?

1
  • 2
    ¿Por qué reinventar la rueda? Compass ya tiene mixins para casi todas las propiedades que necesitan prefijos. Muchos mixins también tienen soporte heredado (break-inside, etc.) 14/10/2013 a las 1:33
3

Lo resolvió así;

@mixin crossBrowser($property, $css) {
    -webkit-#{$property} : $css;
    -moz-#{$property} : $css;
    -o-#{$property} : $css;
    #{$property} : $css;
}

Entonces llamándolo por @include crossBrowser(transition, 0.2s ease-out);


Principios de 2017 editar

Ahora debe escribir su CSS sin prefijos de proveedor y luego usar una herramienta como https://autoprefixer.github.io para agregar prefijos.

2
  • 1
    Esta es una forma realmente buena de generar propiedades que no necesita. 14/10/2013 a las 1:28
  • 1
    use autoprefixer.github.io , en este caso evitará usar el prefijo mixin y unessesery ya que muchas propiedades no funcionan en -o o -ms o -moz, etc.
    fearis
    30 de marzo de 2016 a las 13:13