name - Sass.scss: ¿Nesting y múltiples clases?

sass multiple classes

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 varias clases mientras uso estilos anidados?

En la muestra anterior estoy hablando de esto:

CSS

.container.desc {
    background:blue;
}

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

¿Cómo puedo anidar este container interior con Sass?

Answer 1

Puede usar la referencia del selector principal & será reemplazado por el selector principal 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 & se resolverá por completo, por lo que si el selector primario está anidado, el anidamiento se resolverá antes de reemplazar el & .

Esta notación se utiliza con mayor frecuencia para escribir pseudo-elementos y clases :

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

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

.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 otros caracteres que no sean espacios en blanco delante del & . Por lo tanto, no puede hacer una concatenación directa del selector + & - #id& generaría un error.

Answer 2

Si ese es el caso, creo que necesita utilizar una mejor manera de crear un nombre de clase o una convención de nombre de clase. Por ejemplo, como usted dijo que quiere que la clase .container tenga un color diferente de acuerdo con un uso o aspecto específico. Puedes hacerlo:

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 la metodología BEM en las convenciones de nomenclatura de clases. Puede consultar este enlace: BEM - Metodología de modificación de elementos de bloque