PostCSS mixins

15 августа 2023
IT
postcss
mixins
gulp

Например, создадим миксин button--red и применим его к селектору .test:

@define-mixin button--red {
color: --var(--var-red);
font-size: --var(--var-font-size-h2);
}

.test {
@mixin button--red;
}

После обработки кода плагином получим значение:

.test {
color: --var(--var-red);
font-size: --var(--var-font-size-h2);
}

Подключим postcss-mixins к Gulp:

const mixins = require('postcss-mixins');

gulp.task('css', function(){
var processors = [
mixins()
];
return gulp.src('./src/styles.css')
.pipe(postcss(processors))
.pipe(gulp.dest('../css'))
});