css selectors - LESS CSS - Mixin Arguments and Nth-Child - without looping -
i trying write less argument associate id #p0x1. able write argument
@ytrans = translatey(@argument * 2) then provide argument value each id.
#p0x1(@argument:3){@ytrans} however, unable nth-child css. i've seen solutions solve problem loop. there more direct manner of approaching this?
#p0x1 div:nth-child(1)(@argument:3){ here code have.
/*cube position 0,1*/ #p0x1 div:nth-child(1) { transform : @zaxis @ytrans; background-image: linear-gradient(@gradient); } #p0x1 div:nth-child(2) { transform : @top @zaxis @ytrans; background-image: linear-gradient(@gradient); } #p0x1 div:nth-child(3) { transform : @back @zaxis @ytrans; background-image: linear-gradient(@gradient); } #p0x1 div:nth-child(4) { transform : @bottom @zaxis @ytrans; background-image: linear-gradient(@gradient); } #p0x1 div:nth-child(5) { transform: @left @zaxis @ytrans; background-image: linear-gradient(@gradient); } #p0x1 div:nth-child(6) { transform : @right @zaxis @ytrans; background-image: linear-gradient(@gradient); }
i able find solution of brilliant individual name seven-phases-max helped me prior problem.
my solution
.coordinates(-2, 2); .coordinates(@min, @max) { .xcoor; .xcoor(@xcoor: @min) when (@xcoor <= @max) { .ycoor; .xcoor(@xcoor + 1); } .ycoor(@ycoor: @min) when (@ycoor <= @max) { @ytrans:translatey(@cubesize * @ycoor); @xtrans:translatex(@cubesize * @xcoor); #p@{xcoor}x@{ycoor} div:nth-child(1) { transform: @zaxis @ytrans @xtrans; background-image: linear-gradient(@gradient); } #p@{xcoor}x@{ycoor} div:nth-child(2) { transform: @top @zaxis @ytrans @xtrans; background-image: linear-gradient(@gradient); } #p@{xcoor}x@{ycoor} div:nth-child(3) { transform: @back @zaxis @ytrans @xtrans; background-image: linear-gradient(@gradient); } #p@{xcoor}x@{ycoor} div:nth-child(4) { transform: @bottom @zaxis @ytrans @xtrans; background-image: linear-gradient(@gradient); } #p@{xcoor}x@{ycoor} div:nth-child(5) { transform: @left @zaxis @ytrans @xtrans; background-image: linear-gradient(@gradient); } #p@{xcoor}x@{ycoor} div:nth-child(6) { transform: @right @zaxis @ytrans @xtrans; background-image: linear-gradient(@gradient); } .ycoor(@ycoor + 1); } } this why love preprocessors css. if has suggestions improvements welcome them.
Comments
Post a Comment