Less mixin, extract colors from array and on hover, add darken to that array -
is possible darken array colors? this:
@array: @color1 @color2 @color3 @color4 .color-mix(@i) when (@i > 0) { .myclass { li:nth-child(@{i}) { .background-color(extract(@array, @i)); &:hover { // not working, there right approach this? .background-color(extract(darken(@array, 5.5%, @i))); } } .color-mix(@i - 1); } } // iterate .color-mix(4);
if understand question correctly, yes, can achieve that. below how it. code correct except instead of trying darken extracted value, trying extract darkened value (which not possible).
@array: #fff #00f #ff0 #f00; .color-mix(@i) when (@i > 0) { .myclass { li:nth-child(@{i}) { .background-color(extract(@array, @i)); &:hover { .background-color(darken(extract(@array, @i), 5.5%)); } } } .color-mix(@i - 1); /* have moved because think wrongly placed */ } // iterate .color-mix(4); one improvement suggest code move :hover selector within .background-color mixin below. makes bit more easier read there no wrapping of function call within function , on.
@array: #fff #00f #ff0 #f00; .color-mix(@i) when (@i > 0) { .myclass { li:nth-child(@{i}) { .background-color(extract(@array, @i)); } } .color-mix(@i - 1); } // iterate .color-mix(4); .background-color(@color){ &{ background-color: @color; &:hover{ background-color: darken(@color, 5.5%); } } } even better - avoid mixin if can :)
@array: #fff #00f #ff0 #f00; .color-mix(@i) when (@i > 0) { .myclass { li:nth-child(@{i}) { @color: extract(@array, @i); background-color: @color; &:hover{ background-color: darken(@color, 5.5%); } } } .color-mix(@i - 1); } // iterate .color-mix(4);
Comments
Post a Comment