Я хочу предотвратить дублирование / перезапись определения CSS.
В моем примере я определяю значение по умолчанию в mixins headlineTypo. Вес шрифта по умолчанию равен 700, если значение @include headlineTypo равно нулю.
Когда я объявляю новый класс CSS (headline-medium), $ weight установит значение по умолчанию, поэтому у меня есть:
.headline { font-size:12px ; font-weight: 700 }
.headline-medium { font-size:19px; font-weight: 700 }
@if ($weight != null) and (type-of($weight) == '700') {
font-weight: $weight;
} @else {
font-weight: 700; // Set default
}
@mixin headlineTypo($size: null, $weight: null) {
@if $size != null {
font-size: $size;
} @else {
font-size: 24px; // Set default
}
@if ($weight != null) and ($weight != 700) {
font-weight: $weight;
} @else {
font-weight: 700; // Set default
}
}
.headline {
@include headlineTypo(12px, null); // overwrite $size
&-medium {
@include headlineTypo(19px, null); // overwrite $size
}
}