27

サムネイル画像のグリッド設定があり、現在、行ごとに 4 つの親指があります。それらが整列していることを確認するために、次のコードスニペットがあります。

li:nth-child(5) { margin-left: 0;}

私がやろうとしたことはこれですが、構文エラーが発生しています:

 $galleryGrid: 5;
    li:nth-child($galleryGrid) { margin-left: 0;}

nth-child を変更して 10 などの別の値を使用する場合 (つまり、8 つの親指を続けて使用できるようにするため)、これでうまくいくと思いました。これは不可能ですか、それとも私が間違っているだけですか?!

よろしくお願いします。

4

1 に答える 1

45

n番目の子を変数にするには、変数補間を使用する必要があります。

$galleryGrid: 5;
li:nth-child(#{$galleryGrid}) { margin-left: 0;}

生成します

li:nth-child(5){margin-left:0}

このマークアップは、画像とレイアウトを完全に制御して、5つおきに新しい行が始まるように要素が常に折り返されるようにする場合に適しています。このような保証ができない場合は、親要素に負のマージンを設定することをお勧めします。

于 2012-10-02T17:29:38.037 に答える