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

Question

[Сергей Горячев]

Узучаю 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 цвет и прозрачность сразу?

Answer 1

[Сергей delphinpro]

%bgtrans {
  background: transparentize($cwhite,0.15);
}
.header {
  @extend %bgtrans;
  &:after {
      @extend %bgtrans;
  }
}

Comments

[Сергей Горячев]

Во! То, что нужно! Спасибо)

Answer 2

[iBird Rose]

никак. создавай другой элемент и наследуй его