10
09/2014
less color function
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%); } }