Есть ли способ передать параметр через класс в SASS?

Я хочу добиться примерно этого:

.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; }
...
Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...
2
0
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добиться этого, используя комбинацию интерполяции 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);
  } 
}

Другие вопросы по теме