Mixins dont work in some cases...
nucklearproject opened this issue · 1 comments
Mixin dont work in some cases...
A simple example:
@define-mixin fontSize $size:16 {
font-size: $size + px;
font-size: ($size / 16) + rem;
}
p{
@mixin fontSize 18
}
Result:
p {
font-size: 18 + px;
font-size: (18 / 16) + rem;
}
Some suggestion?
Ok, I solved, but I think wat it is a horrible solution:
postcss-automath
Install https://github.com/EverledgerIO/postcss-automath
Now work with:
@define-mixin fontSize $size:16 {
font-size: $size + 0px;
font-size: ($size / 16) + 0rem;
}
p{
@mixin fontSize 18
}
Result:
p {
font-size: 18px;
font-size: 1.125rem;
}
**
New Update, I found a best solution, using gulp-sass 👍
`
...
sass = require('gulp-sass'),
...
gulp.task('poscompile', function () {
var processors = [
customMedia,
lost,
autoprefixer
];
return gulp.src(paths.source + '/style.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.dist + '/'));
});
`
The @define-mixin
syntax is dropped in precss v3 for the Sass style @mixin
syntax.