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)
