Question

我正从sass迁移到postcss。为了更容易，我使用的是postcss-simple-vars，它支持像sass那样的类似变量。

我的问题是：

$size: 100px;

.class {
    width: $size * 2;
}

Sass结果：

.class {
    width: 200px;
}

带有简单变量的Postcss结果：

.class {
    width: 100px * 2;
}

后者似乎是无效的css代码。为了解决这个问题，我需要使用calc()函数。问题是在我的代码中找到这些计算的所有出现。我有~1 MB的scss ......

是否有任何工具（linter，编译器等）可以分析我的css并警告我需要处理的所有地方？

Answer 1

我不确定是否有可供使用的预构建插件。但是你可以在gulp中创建一个简单的任务，并指出你的css文件上的任何错误。

在你的gulp任务中创建你的新任务，并使用toString（）方法从你的style.css文件中调用errorInfo

等

gulp.task('styles' function() {
  return gulp.src('your src ./path for your style.css ')
    .on('error', function(errorInfo) {
     console.log(errorInfo.toString());
     this.emit('end');
 })
   .pipe(gulp.dest('your dest ./path four final destination path '));
});

更新

var processors = function() {
    return function(css) {
      css.eachDecl('width', function(decl) {
          decl.value = decl.value + ', calc({{ size }} * 2)';
      });
    }
};

gulp.task('css', function() {
  return gulp.src('./app/assets/styles/your_style.css')
    .pipe(postcss([processors]))
    .pipe(gulp.dest('./app/temp/styles/'));
 });

如何获取有关无效css值的警告

1 个答案: