Mixins: Cómo reutilizar estilos de CSS

Los mixins, son pequeños bloques de estilos que se parecen entre sí en estructura, pero distan un poco en valor (Ejemplo: Color, Tamaño de Fuente). Esto es muy usado en pre-procesadores, pero, gracias a CSSNext, lo podemos usar de manera directa en CSS.

El Mixin, igual necesitamos importarlo desde NPM:

npm install --save-dev postcss-mixin

Y lo agregamos en nuestra tarea antes el plugin de CSSNext:

gulp.task(‘css’,function () {

var processors = [

    mixins(), 

    cssnested,

    cssnext({  browsers: [ ‘> 5%’, ’ie 8 ’ ]  })

) 

]

return gulp.src(‘./src/*.css’)

.pipe(postcss(processor))

.pipe(gulp.dest(‘./dist/css’’)) 

.pipe(browserSync.stream()) 

})

Al declarar un mixin, agregamos esos parametros que van a cambiar en cada instancia del mismo, quedando como definición:

@define-mixin “NombreDelMixin” $parametro1, $parametro2 {

  color: $parametro1 

  font-size: $parametro2 

}

Para llamar el mixin, solo usamos la palabra reservada @mixin “NombreDelMixin y los parametros

Por cierto, gracias a CSSNext, podemos usar variables, usando como sintaxis:

var (“NombreDeLaVariable)