Блог

Главная - Вопросы по программированию - Как создавать объявления css через запятую с помощью SASS

Как создавать объявления css через запятую с помощью SASS

#css #sass #css-selectors

#css #sass #css-селекторы

Вопрос:

Я использую Bootstrap и SASS для создания нескольких цветных лент на основе темы Bootstrap, используя.

 @each $color, $value in $theme-colors {
    .ribbon-#{$color} {
        background: theme-color("#{$color}");
    }
}

Генерирует

 .ribbon-primary{
   background: my primary colour
}
.ribbon-secondary{
   background: my secondary colour
}
etc etc

Но у меня есть некоторые свойства CSS, которые можно применить ко всем, например:

 .ribbon-primary, .ribbon-secondary...{
    display: flex;
}

Как мне написать это в SASS, не повторяя это для каждого разделения цвета темы?

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

1. Вы могли бы использовать отдельный класс, который задает общие свойства, например .ribbon класс, который имеет общие стили для всех элементов ленты.

2. Да — я тоже пытаюсь избежать раздувания классов! 🙂

Ответ №1:

Используйте @extend. Это точно подойдет для вашего варианта использования. Это:

 %secretClassToBeExtended {
  display: flex;
}

@each $color, $value in $theme-colors {
    .ribbon-#{$color} {
        @extend %secretClassToBeExtended;
        background: theme-color("#{$color}");
    }
}

Сгенерирует для:

 .ribbon-primary, .ribbon-secondary {
   display: flex;
}

.ribbon-primary{
   background: my primary colour
}

.ribbon-secondary{
   background: my secondary colour
}