---

Ⅰ. 插件描述

Use variables in CSS

Ⅱ. 基本信息

创建日期：  2009-07-28 使用用户：  1 Github星：  1 插件作者：  Benno van Keulen

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin '/cssvar'

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

:source %
:PluginInstall

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

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle '/cssvar'

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

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug '/cssvar'

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

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/vim-scripts/cssvar

Ⅳ. 文档说明

This plugin allows you to define and use variables in stylesheets and make simple calculations with them, like this:

    [pagewidth = 1000]
    #wrapper {
        width: [pagewidth]px;
        margin: [pagewidth/4]px}

In the target CSS file this will become:

    #wrapper {
        width: 1000px;
        margin: 250px}

You can assign the value of a color to a variable and use it anywhere in the stylesheet. When you change the assignment, the value is updated in the whole stylesheet.

    [textcolor = #09c]
    h1 {color: [textcolor]}

The variables are surrounded by two delimiters which you can define in the plugin file (or anywhere in the stylesheet). In the examples above square brackets are used but any printable ascii character, not used in the CSS code, will do.

    ^textcolor = #09c$

It's possible to define the same character as opening and closing delimiter.

    |textcolor = #09c|

HOW IT WORKS
The plugin uses two CSS files. One source file (in the current buffer) with the CSS code and variables and one target file with pure CSS and calculated variables. This last file is generated when the plugin is invoked and you should link to this file in the (X)HTML.