自动前缀语义-UI答案

【问题标题】：Autoprefiximg Semantic-UI自动前缀语义-UI
【发布时间】：2016-10-21 10:54:24
【问题描述】：

我是一个新手，想问一下如何为semantic-ui的Less文件自动添加前缀？根据文档，

Add vendor prefixes for supported browsers with autoprefixer

【问题讨论】：

标签： html css semantic-ui semantic-ui-css

【解决方案1】：

Autoprefixer 是一个流行的插件，开发人员可以将其集成到他们的工作流程中，以免忘记所有供应商前缀。这是链接：https://github.com/postcss/autoprefixer

如果你使用的是 Sublime Text Editor，你也可以通过 Package Manager 安装它。在包的用户首选项中，您可以选择要支持的浏览器。例如：['> 5%', 'last 1 version']

Autoprefixer 使用Browerlist 指定目标浏览器。

因为 Autoprefixer 是 CSS 的后处理器，所以你也可以使用它使用 Sass、Stylus 或 LESS 等预处理器。

您可以使用的一种方法是使用gulp-lessplugin，而不是打开每个LESS 文件并对其应用Autoprefixer。

这是一个例子：

var LessAutoprefix = require('less-plugin-autoprefix');
var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });

return gulp.src('./less/**/*.less')
  .pipe(less({
    plugins: [autoprefix]
  }))
  .pipe(gulp.dest('./public/css'));

代码来源：https://github.com/plus3network/gulp-less

【讨论】：

或者，OP 可以简单地使用作为 Semantic-UI 安装一部分的 glup.js 文件。那里的各种任务在适当的时候使用自动前缀。