SASS-də @extend-də seçicilərin ardıcıllığı
@extend direktivi
seçicilərin ardıcıllığını genişləndirmək üçün də
istifadə edilə bilər.
Aşağıdakı nümunəyə baxın:
Nümunəni nəzərdən keçirək:
#menu .navbar {
@extend div;
}
div {
color: #0a0a4b;
&:hover {
text-decoration: underline;
}
}
Kompilyasiyadan sonra biz aşağıdakı kodu aldıq:
div, #menu .navbar {
color: #0a0a4b;
}
div:hover, #menu .navbar:hover {
text-decoration: underline;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
button {
@extend link;
}
link {
font-size: 10px;
&:active {
color: #f0ffff;
background-color: #110c63;
}
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
.main-text {
font-family: Impact;
}
button {
@extend link;
font-size: 10px;
@extend .main-text;
}
link {
&:hover {
color: #333333;
background-color: #6d6d6d;
}
}
