1

ID #p0x1 に関連付けるより少ない引数を記述しようとしています。のような引数を書けるようにしたい

@ytrans = translateY(@argument * 2)

次に、各 ID にその引数値を指定します。

#p0x1(@argument:3){@ytrans}

ただし、nth-child css ではこれを行うことができません。この問題をループで解決するソリューションしか見たことがありません。このようにこれにアプローチするより直接的な方法はありますか？

#p0x1 div:nth-child(1)(@argument:3){

ここに私が現在持っているコードがあります。

/*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);
}
4

1 に答える 1

0

私は最終的に、以前の問題を解決してくれた素晴らしい個人名であるSeven-phases-maxの助けを借りて、この解決策を見つけることができました。

私の解決策

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

60,000 行以上の出力

これが、CSS のプリプロセッサーが好きな理由です。誰かが改善のための提案があれば、私はそれらを歓迎します.

于 2015-04-24T21:23:56.317 に答える