Example Mixins with PostCSS and precss
const PostCSS = require('postcss')
const conditionals = require('postcss-conditionals')
const precss = require('precss')
void(0)
const css =
`
@define-mixin backImages $x $y $url $color $size $repeat {
@if $color != '' {
background-color: $(color);
}
@else{
@if $url != '' {
background-image: $(url);
}
@else {
@if $x != '' && $y != '' {
background-position: $(x) $(y);
}
@else {
@if $size != ''{
background-repeat: $(repeat);
}
@else {
@if $repeat != ''{
background-size: $(size);
}
@else {
background:none;
}
}
}
}
}
}
body{
@mixin backImages center center url(../images/juego_img/logojuego.png) '' cover no-repeat;
position: relative;
background: blue;
}
`
const result = await PostCSS([precss(), conditionals()]).process(css, {from: 'src/style.css', to:'dest/style.css'})
result.css
no comments