Question

我使用插件npm gulp-stylus生成我的样式表。由于Internet Explorer不会低于3位小数（编辑16/11/2015：2位小数！）我会将所有数字全局：

// => code output :
width: 83.33%;

使用gulp-sass我直接从Gulpfile.js文件添加了一个选项，如下所示：

// Gulpfile.js (code for Sass)
return sass(source + '/Styles', {
      style: 'compressed',
      precision: 2 // it's here
  })

但我不知道如何吞下Stylus，因为插件页面不是很明确......我只知道单独做：

.test
  //width (100% / 12 * 10)
  width floor(100% / 12 * 10, 2) // or round(), or ceil()... according to needs

Answer 1

gulp-stylus中没有这样的设置。但你可以使用postcss插件。使用正则表达式处理浮点数 /（\ d +？。\ d {3，}）（％| em | px）/ gi

// Load the PostCSS module.
var postcss = require('postcss');
var post    = require('gulp-postcss');

// Define the plugin.
var precision = postcss.plugin('postcss-precision', function() {
  var longTest = /(\d+?\.\d{3,})(%|em|px)/gi;

  return function(style) {
    style.eachDecl(function(decl) {


      if (! decl.value || longTest.test(decl.value)) {
        // Grab array of matches.
        var matches = longTest.exec(decl.value + '');

        // We'll assume there's one.
        var value = matches[1];

        // Round two decimal places.
        var rounded = Math.round(parseFloat(value) * 100) / 100;

        // Change the value in the tree.
        decl.value = decl.value.replace(value, rounded.toString());
      }
    });
  };
});

// Make PostCSS aware of this plugin.
postcss().use(precision);

gulp.task('css', function() {
  return gulp.src([
      'src/**/*.css'
    ])
    .pipe(post([precision()]))
    .pipe(gulp.dest('build/css'));
});

gulp.task('default', ['css']);

Gulp下的Stylus：全局舍入所有小数

1 个答案: