w3ctech

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

一. 前言

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

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

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

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

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

二. 简介

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 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

五. 后记

更多 mixin 也在陆续开发中,欢迎试用并反馈问题

前端圈微信

扫码关注前端圈微信公众号

共收到0条回复