Clearless – 一套实用的LESS Mixins

还在常常为不断重复地写阴影CSS代码而发愁吗？还在不断精炼自己的LESS库吗？不如来看看Clearless吧，它能迅速帮你减轻痛苦。

LESS在CSS的基础上已经在可复用性上提升了不少，而如果使用惯了LESS，你就会发现自己会积累不少常用的Mixins，比如shadow，transition这样常用的。但是这样还不够好，往往在A项目中适用的，到了B项目中又要修改。

Clearless集合了一大批常用的mixin，同时又具有一定的可定制性。

如何使用

Clearless是用LESS写成的，因此要在自己的LESS代码中使用，首先需要将其加入到你的现有LESS代码域中：

@import "mixins/all.less";

之后，做一些初始化工作：

@using-modernizr: true;
@base-font-size: 14;

好了，现在可以坐享其成地使用Clearless的mixin了！比如像下面这样：

/* Usage: */
.example1 {
    .border-radius( 5px );
}
.example2 {
    .border-radius( 5px, 7px, 5px, 10px );
}

就会生成：

/* Example output: */
.example1 {
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.example2 {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 7px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 10px;
}

许可证

Clearless使用MIT协议进行许可分发。