Подтвердить что ты не робот

Использование переменных SASS в nth-child?

У меня есть сетка, созданная миниатюрными изображениями, в настоящее время 4 больших пальца на строку. Чтобы убедиться, что они выстроены, у меня есть этот фрагмент кода:

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

То, что я пытался сделать, это, но я получаю синтаксическую ошибку:

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

Если бы я захотел изменить n-й-ребенок, чтобы использовать другое значение, например 10 (поэтому я могу иметь 8 больших пальцев в строке), я предположил, что это сработает. Разве это невозможно, или я просто неправильно делаю?!

Заранее благодарим за помощь.

4b9b3361

Ответ 1

Вам нужно использовать переменную-интерполяцию, чтобы позволить nth-child быть переменной.

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

Формирует

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

Эта разметка прекрасна, если у вас есть абсолютный контроль над изображениями и макетом, чтобы убедиться, что ваши элементы всегда обертываются таким образом, что каждый пятый начинает новую строку. Если вы не можете сделать такие гарантии, установка отрицательных полей на родительском элементе - лучший способ пойти.