Есть ли способ передать параметр через класс в SASS? - PullRequest
0 голосов
/ 06 мая 2018

То, чего я хочу достичь, это что-то вроде этого:

.indent-me-($num) {
    text-indent: ($num * 2.5em);
}

Так что, если я добавлю класс indent-me-10 к какому-либо элементу, он получит стиль text-indent: 25em. Я хочу сделать это, потому что 1) мне нужна достаточная гибкость (там , вероятно, не будет более 4 или около того уровней "отступа", но мне нравится охватывать все мои базы - эти классы будут генерироваться с помощью логики javascript, я не кодирую их жестко в HTML) и 2), я бы не хотел писать что-то вроде следующего на таком умном языке, как SASS. Я не очень знаком со всеми его сложностями, поэтому я чувствую, что, должно быть, что-то упустил.

.indent-me-1 { text-indent: 2.5em; }
.indent-me-2 { text-indent: 2 * 2.5em; }
.indent-me-3 { text-indent: 3 * 2.5em; }
.indent-me-4 { text-indent: 4 * 2.5em; }
...

1 Ответ

0 голосов
/ 06 мая 2018

Этого можно добиться, используя комбинацию интерполяции SCSS и цикла.

sass-интерполяция с использованием #{$variable}

$num: 1;
.indent-me-#{$num} {
    text-indent: ($num * 2.5em);
}

и цикл @for, чтобы сделать это также

@for $num from 1 through 10 {
  .indent-me-#{$num} {
    text-indent: ($num * 2.5em);
  } 
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...