csstools/precss

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.