Alias and font responsive not working together
gillchristian opened this issue · comments
Christian Gill commented
Hello!!
I have this set up:
var gulp = require('gulp'),
rename = require('gulp-rename'),
sourcemaps = require('gulp-sourcemaps'),,
rucksack = require('gulp-rucksack');
gulp.task(TASKS.dev.style, function () {
return gulp.src(FILES.css.source)
.pipe( sourcemaps.init() )
.pipe( rucksack({autoprefixer: true}) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest(FILES.css.dest) );
});
And I´ve had issues with using alias
together with font-size: responsive
:
/* --- this --- */
@alias {
fs: font-size;
br: border-radius;
}
.bar{
fs: responsive;
fs: 13px;
}
.foo {
font-size: responsive;
}
/*--- compiles to this ---*/
.bar{
font-size: responsive;
font-size: 13px;
}
.foo {
font-size: calc(12px + 9 * ( (100vw - 420px) / 860));
}
@media screen and (min-width: 1280px){
.foo{
font-size: 21px;
}
}
@media screen and (max-width: 420px){
.foo{
font-size: 12px;
}
}
/*# sourceMappingURL=test.css.map */
So it looks like font responsive is being processed before alias so it does not recongize fs
as font-size
.