Цепные расширения в @extend в SASS
Директива @extend поддерживает также
цепное (последовательное) расширение, т. е.
селектор может расширяться другим селектором,
который, в свою очередь, расширяется третьим
селектором. Например:
Рассмотрим пример:
.warning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning {
@extend .warning;
border-width: 3px;
}
.systemWarning {
@extend .personalWarning;
position: center;
}
Как мы видим из результата компиляции
все элементы с классом .systemWarning
имеют также стили классов .warning и
.personalWarning:
.warning, .personalWarning, .systemWarning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning, .systemWarning {
border-width: 3px;
}
.systemWarning {
position: center;
}
Расскажите, каким будет результат компиляции следующего кода:
div {
font-size: 10px;
color: #181402;
}
.main-block {
@extend div;
border: 2px solid orange;
}
#warning-text {
@extend .main-block;
margin-top: 10px;
}
Расскажите, каким будет результат компиляции следующего кода:
p {
padding: 10px;
}
.main-text {
font-weight: 800px;
}
.card {
@extend p;
color: #021338;
}
.product-card {
@extend .card, .main-text;
font-size: 12px;
}
Расскажите, каким будет результат компиляции следующего кода:
p {
padding: 5px;
}
.main-text {
@extend p;
font-size: 14px;
}
.card {
@extend .main-text;
border: 1px solid black;
}
.product-card {
@extend .card;
background-color: #e1f1f1;
}