El papel de y en menos

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

Supongo que te gusta

Origin blog.csdn.net/qq_43612538/article/details/108791580
Recomendado
Clasificación