Nesting CSS Classes: ahora hecho posible

en versiones CSS anteriores, la idea de las clases de anidación era escurridizo. Los desarrolladores tuvieron que recurrir a técnicas más complejas para lograr efectos similares. Sin embargo, el módulo de anidación de CSS ha abierto nuevas posibilidades.

¿puede anidar las clases CSS?

La respuesta es una rotunda "sí". Con el módulo de anidación CSS, puede adoptar la siguiente sintaxis:

.class1 {
  some stuff;
}

.class2 {
  .class1;
  some more stuff;
}

Esta sintaxis le permite anidar clases, creando estructuras jerárquicas.

muestra implementaciones

Aquí hay algunos ejemplos que muestran el poder de CSS Nesting:

[&] table.colortable { & td { Text-Align: Center; & .c {text-transform: uppercase} &: First-Child, &: First-Child TD {Border: 1px Solid Black} } & th { Text-Align: Center; Fondo: negro; Color: blanco; } }

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child   td { border: 1px solid black }
  }

  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

. foo { Color: rojo; @nest &> .Bar { Color: azul; } }

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child   td { border: 1px solid black }
  }

  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

. foo { Color: rojo; @nest .parent & { Color: azul; } }

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child   td { border: 1px solid black }
  }

  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

con Nesting CSS, ahora puede escribir hojas de estilo más concisas y mantenibles. Disfrute de la mayor flexibilidad y estructura semántica que proporciona.