一. 前言

在我们平时的开发中，经常会用到基于CSS预处理器（如LESS、SASS、Stylus）开发的mixin，以此来提高我们的开发效率。由于不同团队间（甚至同一个团队里）使用着不同的预处理器，这直接导致了以下几个问题：

• 大家在各自的产品里分别定义了一套mixin，而大部分mixin的功能是相同的，存在较大量地重复开发。

• 由于实现相同功能的mixin来自不同的开发人员，在 mixin 命名，参数设置及使用上存在较大差异，增加了跨团队、跨产品的协作成本。

我们认为：对于同一个功能而言，mixin 在命名，参数设置及使用上，应该与标准用法保持一致，没有必要因人而异，没有必要因预处理器而异！

基于上述考虑，且web上无满足要求的mixin库，我们开发了 XMixins 。

二. 简介

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

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

• 每个mixin在参数设置及使用上与标准用法保持一致。

三. 如何使用

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 也在陆续开发中，欢迎试用并反馈问题。

扫码关注w3ctech微信公众号