XMixins -- 一个兼容LESS、SASS、Stylus的超级mixin库！

一. 简介

XMixins 是一个兼容LESS、SASS、Stylus的CSS Mixin库，它有两大特性：

• 能为不同的预处理器（LESS、SASS、Stylus）提供定义及使用完全一致的mixin。

• 每个mixin在定义及使用上遵循CSS3规范。

二. 如何使用

XMixins 是一个bower包，可以通过 bower install xmixins 进行安装，安装成功后，会在当前目录下出现如下内容：

bower_componnets // 未配置.bowerrc时，会默认使用该目录
    -- xmixins
        -- index.less
        -- index.scss
        -- index.styl

然后在目标文件中导入即可，如下：

@import "bower_components/xmixins/index";

// 示例：给目标元素添加一个线性渐变

// less下的实现
div {
    .x-linear-gradient(to bottom, #fff, #666);
}

// sass下的实现
div {
    @include x-linear-gradient(to bottom, #fff, #666);
}

// stylus下的实现
div {
    x-linear-gradient(to bottom, #fff, #666);
}

从上面的例子可以看到：三种预处理器下，实现同一功能的mixin，在命名及参数设置上是完全一样的，用法也与标准保持一致。

三. 目前已提供的mixin

| mixin name | IE | Chrome | Safari | Firefox | Opera | IOS 7.1.2
|:—-:|:—-:|:—-:|:—-:|:—-:|:—-:|:—-:|
|x-border-radius | 9+ | √ | √ | √ | √ | √ |
|x-border-triangle | 6+ | √ | √ | √ | √ | √ |
|x-box-shadow | 9+ | √ | √ | √ | √ | √ |
|x-box-sizing | 9+ | √ | √ | √ | √ | √ |
|x-text-overflow | 6+ | √ | √ | √ | √ | √ |
|x-clearfix | 6+ | √ | √ | √ | √ | √ |
|x-min-height | 6+ | √ | √ | √ | √ | √ |
|x-opacity | 6+ | √ | √ | √ | √ | √ |
|x-inline-block | 6+ | √ | √ | √ | √ | √ |
|x-font-face | 6+ | √ | √ | √ | √ | √ |
|x-linear-gradient | 6+ | √ | √ | √ | √ | √ |
|x-grayscale | 6~9 | √ | √ | √ | √ | √ |