webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

Наследование в SCSS одного свойства?

Узучаю sass-scss.ru/guide
Вот пример:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}

Тут всё понятно.
А если мне нужно насладовать не весь блок, а только пару свойств?

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message2 {
  border: 1px solid #ccc;
  padding: 10px;
}

Или приведу более конкретный пример из того, что нужно сейчас.

.header {
    background: transparentize($cwhite,0.15);
    position: fixed;
    width: 100%;
    z-index: 100;
    &:after {
        content: '';
        position: absolute;
        background: transparentize($cwhite,0.15);
        width: 100%;
        left: 0;
        bottom: -50px;
        height: 50px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }
}

Сейчас фактически приходится дублировать одну и ту же запись background: transparentize($cwhite,0.15);.
А можно как-то унаследовать из header цвет и прозрачность сразу?
  • Вопрос задан
  • 4048 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
%bgtrans {
  background: transparentize($cwhite,0.15);
}
.header {
  @extend %bgtrans;
  &:after {
      @extend %bgtrans;
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
никак. создавай другой элемент и наследуй его
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы