Autoprefiximg Semantic-UI

Question

I'm a newbie and would like to ask how to autoprefix semantic-ui's Less files? According to docs,

Add vendor prefixes for supported browsers with autoprefixer

Answer 1

Autoprefixer is a popular plugin that developers integrate in their workflow to not lose their minds trying to remember all the vendor prefixes. Here's the link: https://github.com/postcss/autoprefixer

If you are using Sublime Text Editor, you can also install it via Package Manager. In the User Preferences for the Package, you can choose which browsers you want to support. For example: ['> 5%', 'last 1 version']

Autoprefixer uses Browerlist to specify which browsers to target to.

Because Autoprefixer is a postprocessor for CSS, you can also use it with pre-processors such as Sass, Stylus or LESS.

One method you can use rather than opening each LESS file and applying Autoprefixer on it is to use gulp-lessplugin.

Here's an example:

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'));

Code Source: https://github.com/plus3network/gulp-less