一. 前言
在我们平时的开发中,经常会用到基于CSS预处理器(如LESS、SASS、Stylus)开发的mixin,以此来提高我们的开发效率。由于不同团队间(甚至同一个团队里)使用着不同的预处理器,这直接导致了以下几个问题:
-
大家在各自的产品里分别定义了一套mixin,而大部分mixin的功能是相同的,存在较大量地重复开发。
-
由于实现相同功能的mixin来自不同的开发人员,在 mixin 命名,参数设置及使用上存在较大差异,增加了跨团队、跨产品的协作成本。
我们认为:对于同一个功能而言,mixin 在命名,参数设置及使用上,应该与标准用法保持一致,没有必要因人而异,没有必要因预处理器而异!
基于上述考虑,且web上无满足要求的mixin库,我们开发了 XMixins 。
<br>
二. 简介
XMixins 是一个兼容LESS、SASS、Stylus的CSS Mixin库,它有着两大特性:
-
为不同的预处理器(LESS、SASS、Stylus)提供定义及使用完全一致的mixin。
-
每个mixin在参数设置及使用上与标准用法保持一致。
<br>
三. 如何使用
XMixins 是一个bower包,可以通过 bower install xmixins
进行安装,安装成功后,会在当前目录下出现如下内容:
bower_componnets // 未配置.bowerrc时,会默认使用该目录
-- xmixins
-- index.less
-- index.scss
-- index.styl
然后在目标文件中导入即可,如下:
[@import](/user/import) "bower_components/xmixins/index";
// 示例:给目标元素添加一个线性渐变
// less下的实现
div {
.x-linear-gradient(to bottom, #fff, #666);
}
// sass下的实现
div {
[@include](/user/include) x-linear-gradient(to bottom, #fff, #666);
}
// stylus下的实现
div {
x-linear-gradient(to bottom, #fff, #666);
}
从上面的例子可以看到:三种预处理器下,实现同一功能的mixin,在命名及参数设置上是完全一样的,用法也与标准保持一致。
<br>
四. 目前已发布的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 | √ | √ | √ | √ | √ |
<br>
五. 后记
更多 mixin 也在陆续开发中,欢迎试用并反馈问题。