ProgramBox

Использование подстановочного знака в качестве значения

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#css #sass

Вопрос:

Есть ли способ использовать подстановочный знак, чтобы записать все эти двадцать правил как одно:

 .margin-bottom-1rem {
  margin-bottom: 1rem;
}

.margin-bottom-2rem {
  margin-bottom: 2rem;
}

...

.margin-bottom-20rem {
  margin-bottom: 20rem;
}

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

Комментарии:

1. Используйте этот селектор *[class^="margin-bottom-"] для выбора элементов. Примечание: приоритет низкий. Невозможно извлечь значение ..rem имени класса. Для этого используйте Javascript.

2. Нет. Даже при использовании SCSS/LESS и т. Д. CSS все равно будет компилироваться по полному набору правил. предварительный процессор просто облегчает написание кода.

Ответ №1:

SCSS

 $sizes: 1rem, 2rem, 5rem, 10rem, 20rem;

@each $size in $sizes {
  .margin-bottom-#{$size} {
    margin-bottom: $size;
  }
}

нахальство

 $sizes: 1rem, 2rem, 5rem, 10rem, 20rem

@each $size in $sizes
  .margin-bottom-#{$size}
    margin-bottom: $size

Оба производят это:

 .margin-bottom-1rem {
  margin-bottom: 1rem;
}

.margin-bottom-2rem {
  margin-bottom: 2rem;
}

.margin-bottom-5rem {
  margin-bottom: 5rem;
}

.margin-bottom-10rem {
  margin-bottom: 10rem;
}

.margin-bottom-20rem {
  margin-bottom: 20rem;
}

Сделайте что-нибудь для каждого элемента

https://sass-lang.com/documentation/values/lists#do-something-for-every-element

Комментарии:

1. Ах, петли! sass-lang.com/documentation/at-rules/control/for

2. Это ответ на ваш вопрос?

Метки: Использование подстановочного знака в качестве значения