Объединение последовательностей селекторов в @extend в SASS
Если нам нужно объединить
последовательности селекторов,
то мы также используем директиву @extend:
Рассмотрим следующий пример:
#main .list p {
font-weight: bold;
}
#sub .resume .link {
@extend p;
}
Обратите внимание на скомплированный код
в файле css, при объединении двух
последовательностей, у которых нет общих
селекторов, то автоматически образуются
новые селекторы: один с первой последовательностью
перед вторым и один со второй последовательностью
перед первым:
#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
font-weight: bold;
}
В случае, когда у последовательностей
есть общий селектор, то они будут объединены
вместе и чередоваться будут только различия
(если таковые существуют). В следующем примере
обе последовательности имеют идентификатор #main:
#main .list p {
font-weight: semi-bold;
}
#main .resume .link {
@extend p;
}
В результате компиляции эти два идентификатора будут объединены:
#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
font-weight: bold;
}
Расскажите, каким будет результат компиляции следующего кода:
div p {
font-size: 12px;
padding-bottom: 4px;
}
link button #card-title {
@extend p;
}