XMixins -- 一个兼容LESS、SASS、Stylus的超级mixin库!
发布于 10 年前 作者 mytcer 3221 次浏览 最后一次编辑是 8 年前

一. 前言

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

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

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

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

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

<br>

二. 简介

XMixins

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

回到顶部