Блог

Главная - Вопросы по программированию - Расширить вложенный селектор SASS внутри другого файла SASS

Расширить вложенный селектор SASS внутри другого файла SASS

#css #sass #css-selectors #oocss

Вопрос:

Я ищу способ уменьшить повторяемость в моей дерзости. У меня есть следующее объявление, которое вложено в селектор.

Внутри register.scss :

         .btn-primary {
            background-color: $brand-btn-primary;
            color: #FFFFFF;
            font-size: 16px;
            line-height: 24px;
        }

Я хотел бы сделать @extend это внутри селектора в другом файле SASS, но я не уверен, возможно ли это.

admin.scss :

     .btn-primary.upgrade-btn {
        font-family: Helvetica;
        background-color: $brand-btn-primary;
        color: #FFFFFF;
        font-size: 16px;
        line-height: 24px;
        border: 1px solid $brand-btn-primary;
        min-width: 160px;
    }

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

Ошибка: сложные селекторы не могут быть расширены.

Есть ли способ сделать это?

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

1. просто добавьте оба класса в div и не пытайтесь расширить .btn-primary.upgrade-btn, просто используйте .upgrade-btn.. Если вы импортируете их правильно, специфика CSS сделает все остальное

2. К сожалению, это не так просто. btn-primary В файле реестра уже переопределено объявление по умолчанию, поэтому мне нужно расширить переопределенное объявление.

3. Чего вы пытаетесь достичь с помощью @extend?

4. @djnetherton Я ищу extend объявления CSS .btn-primary внутри .btn-primary.upgrade-btn определения в блоке кода выше. Как вы можете видеть, у них одни и те же атрибуты, и я бы предпочел расширить, а не дублировать это в своем SASS. Возможно ли это? Или селектор должен находиться в одном файле и не быть вложенным?

Ответ №1:

Вам нужно будет удалить двойной селектор классов и расширить его с помощью приведенного ниже метода.

 .btn-primary {
  background-color: $brand-btn-primary;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
}
.upgrade-btn {
  @extend .btn-primary;
  font-family: Helvetica;
  border: 1px solid $brand-btn-primary;
  min-width: 160px;
}
Метки: