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);     } } 

output of more 60,000 lines

this why love preprocessors css. if has suggestions improvements welcome them.


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -