---

Ⅰ. 插件描述

Adds autoprefixer support to Vim.

Ⅱ. 基本信息

创建日期：  2014-08-13 使用用户：  3 Github星：  16 插件作者：  Ioannis Kapoulas

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'ioannis-kapoulas/vim-autoprefixer'

… 然后在Vim中运行以下命令:

:source %
:PluginInstall

对于Vundle版本 < 0.10.2，请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'ioannis-kapoulas/vim-autoprefixer'

… 然后在Vim中运行以下命令:

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'ioannis-kapoulas/vim-autoprefixer'

… 然后在Vim中运行以下命令:

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/ioannis-kapoulas/vim-autoprefixer

Ⅳ. 文档说明

# vim-autoprefixer

Adds autoprefixer support to Vim.

About

With vim-autoprefixer you can use the power of Autoprefixer without leaving vim. Write your CSS and add vendor prefixes automatically using values from Can I Use. Autoprefixer utilizes the most recent data from Can I Use to add only necessary vendor prefixes. It also removes old, unnecessary prefixes from your CSS.

vim-autoprefixer plugin works in normal and visual vim mode. Select a block of CSS code in visual mode hit F7 and apply prefixes on it, in normal mode the plugin processes the entire file.

Note that vim-autoprefixer interact with the user and promt for Autoprefixer options, if you don’t set any option and hit Enter vim-aytoprefixer continue with Autoprefixer default settings.

Install

vim-autoprefixer requires Node.js>=0.12.0 and Postcss plugin Autoprefixer-cli installed on your system.

Install and test autoprefixer-cli to make sure it's running properly.

npm install --global postcss-cli autoprefixer
postcss --use autoprefixer *.css -d build/

Install vim-autoprefixer.

You can install the plugin manually, just extract the zip file and place the content files in your .vim subfolders.

Place in ~/.vim/plugin/vim-autoprefixer.vim

and in ~/.vim/doc/vim-autoprefixer.txt

Or you can install it with Vundle or Pathogen

Usage

Add vendor prefixes in entire file

First of all open an existing CSS file or write some from scratch:

.myclass {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

a {
    display: flex;
}

• Press ESC to set vim in normal mode.
• Press F7
• vim-autoprefixer executing and waiting for options

Add vendor prefixes to CSS rules
Hit ENTER or you can add Autoprefixes CLI Options
Enter options :

• Just press ENTER and view your buffer to change in this:

.myclass {
    border-radius: 5px;           
}

a {
    display: -webkit-box;         
    display: -webkit-flex;           
    display: -ms-flexbox;         
    display: flex;
}

Before you press ENTER you can set some options:

Add vendor prefixes to CSS rules
Hit ENTER or you can add Autoprefixes CLI Options
Enter options :--autoprefixer.browsers "> 5%" 

Your CSS code now prefixed like this:

.myclass {
    border-radius: 5px;
}

a {
    display: -webkit-box;
    display: flex;
}

Add vendor prefixes in selected items

Like the previus example write some CSS code:

.myclass {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

a {
    display: flex;
}

• Press ESC to exit insert mode.
• Press v and select the entire class or use your mouse.
• Press F7
• Hit ENTER

Vendor prefixes added only in the class:

.myclass {
    border-radius: 5px;
}

a {
    display: flex;
}

License

The MIT License (MIT)