10 09/2014

less mixins

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

每次都要重写 mixin,太罗嗦。把我常用的写在 lib.less,以后的 less 直接

@import "lib.less";
//less lib used by davidguoshuang at gamil.com
//紧密团结在 以 webkit 为核心的...

.transform (...) {
    -webkit-transform:@arguments;
    -moz-transform:@arguments;
    -o-transform:@arguments;
    transform:@arguments;
}
...

下载我的 lib.less

.bgmixin(@color) {
    (~".@{color}") {
        background-color: @@color;
        .boxbar {
            background-color: lighten(@@color, 10%);
        }
    }
}

@blue: #468ACE;
@green: #41A53D;
@red: #9C2525;

.bgmixin("blue");
.bgmixin("green");
.bgmixin("red");
.blue{
  background-color: #468ace;
}
.blue .boxbar {
  background-color: #6ea3d9;
}
.green{
  background-color: #41a53d;
}
.green .boxbar {
  background-color: #59c055;
}
.red{
  background-color: #9c2525;
}
.red .boxbar{
  background-color: #c52f2f;
}