1. & puede usarse como clase principal
Por ejemplo, mira este código: solo escribo el nombre de la clase dentro, no seas como yo cuando escribes el proyecto tú mismo
.ding{
.qi{
width: 100px;
height: 200px;
background-color: #1bc4fb;
}
.sui{
width: 300px;
height: 200px;
color: red;
&.xi{
width: 360px;
height: 360px;
}
}
}
El archivo css compilado:
.ding .qi {
width: 100px;
height: 200px;
background-color: #1bc4fb;
}
.ding .sui {
width: 300px;
height: 200px;
color: red;
}
.ding .sui.xi {
width: 360px;
height: 360px;
}
Encontrarás & se convierte en .sui (su elemento padre)
2. & puede cambiar el orden del selector
.ding{
width: 520px;
height: 520px;
content: 'test9988';
color: red;
.qi{
width: 100px;
height: 200px;
background-color: #3a84ff;
}
.sui{
width: 120px;
height: 200px;
color: #7a7a7a;
}
.xi &{
width: 666px;
height: 520px;
content: 'test';
}
}
código CSS:
.ding {
width: 520px;
height: 520px;
content: 'test9988';
color: red;
}
.ding .qi {
width: 100px;
height: 200px;
background-color: #3a84ff;
}
.ding .sui {
width: 120px;
height: 200px;
color: #7a7a7a;
}
.xi .ding {
width: 666px;
height: 520px;
content: 'test';
}
/*# sourceMappingURL=test1.css.map */
.ding corrió a la parte posterior de .xi