Sass .scss: anidamiento y clases múltiples?

Question

Estoy usando Sass (.scss) para mi proyecto actual.

siguiente ejemplo:

HTML

<div class="container desc"> 
    <div class="hello"> 
     Hello World 
    </div> 
</div> 

SCSS

.container { 
    background:red; 
    color:white; 

    .hello { 
     padding-left:50px; 
    } 
} 

Esto funciona muy bien.

¿Puedo manejar múltiples clases mientras uso estilos anidados?

En el ejemplo anterior Me refiero a esto:

CSS

.container.desc { 
    background:blue; 
} 

En este caso todo div.container normalmente sería reddiv.container.desc pero sería azul.

¿Cómo puedo anidar esto dentro de container con Sass?

Answer 1

Puede utilizar el parent selector reference&, que será sustituido por el selector de matriz después de la compilación:

Para su ejemplo:

.container { 
    background:red; 
    &.desc{ 
     background:blue; 
    } 
} 

/* compiles to: */ 
.container { 
    background: red; 
} 
.container.desc { 
    background: blue; 
} 

El & resolverá por completo, por lo que si se anida el selector de matriz en sí, la anidación se resolverá antes de reemplazar el &.

Esta notación se utiliza con mayor frecuencia para escribir pseudo-elements and -classes:

.element{ 
    &:hover{ ... } 
    &:nth-child(1){ ... } 
} 

Sin embargo, se puede colocar la & en prácticamente cualquier posición te gusta ^*, por lo que la siguiente es posible también:

.container { 
    background:red; 
    #id &{ 
     background:blue; 
    } 
} 

/* compiles to: */ 
.container { 
    background: red; 
} 
#id .container { 
    background: blue; 
} 

Sin embargo, tenga en cuenta que esto de alguna manera rompe su estructura de anidamiento y, por lo tanto, puede aumentar el esfuerzo de encontrar una regla específica en su hoja de estilo.

*: No se permiten más caracteres que espacios en blanco delante del &. Por lo tanto, no puede hacer una concatenación directa de selector + & - #id& arrojaría un error.

Answer 2

Si ese es el caso, creo que debe usar una forma mejor de crear un nombre de clase o una convención de nombre de clase. Por ejemplo, como dijo, desea que la clase .container tenga un color diferente según un uso o aspecto específico.Usted puede hacer esto:

SCSS

.container { 
    background: red; 

    &--desc { 
    background: blue; 
    } 

    // or you can do a more specific name 
    &--blue { 
    background: blue; 
    } 

    &--red { 
    background: red; 
    } 
} 

CSS

.container { 
    background: red; 
} 

.container--desc { 
    background: blue; 
} 

.container--blue { 
    background: blue; 
} 

.container--red { 
    background: red; 
} 

El código anterior se basa en BEM Metodología en las convenciones de nombres de clase. Puede consultar este enlace: BEM — Block Element Modifier Methodology