10 09/2014

less color function

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

less

@color:#419641;

#lessFuncDiv {
    div {
        width: 160px;height: 160px;display: inline-block;
        border:solid 3px #ccc;margin-right: 10px;
    }
    .d1 {
        background: @color;
        border-color:darken(@color,20%);
        &:hover {
            background: lighten(@color,10%);
            border-color:lighten(darken(@color,20%),10%);
        }
    }
    .d2 {
        background: spin(@color,200);
        border-color:darken(spin(@color,200),20%);
        &:hover {
            background: lighten(spin(@color,200),10%);
            border-color:lighten(darken(spin(@color,200),20%),10%);
        }
    }
    .d3 {
        background: desaturate(@color,50%);
    }
    .d4 {
        background: mix(green,yellow,50%);
    }
}

More tips about lesscss

via http://www.hongkiat.com/blog/less-color-functions/