Съединяване на селектори в SASS
Понякога ни е необходимо, че при компилиране на вложени конструкции те да се съединяват не чрез интервал, а плътно. За това пред името на вложения селектор е необходимо да се постави амперсанд:
div {
&.block {
width: 300px;
}
}
В резултат след компилиране ще получим следния код:
div.block {
width: 300px;
}
Разкажете, какъв ще бъде резултатът от компилирането на следния код:
#block {
&.xxx {
width: 300px;
}
}
Разкажете, какъв ще бъде резултатът от компилирането на следния код:
#block {
.xxx {
width: 300px;
}
}
Разкажете, какъв ще бъде резултатът от компилирането на следния код:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Разкажете, какъв ще бъде резултатът от компилирането на следния код:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Разкажете, какъв ще бъде резултатът от компилирането на следния код:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
