html - modificador - proyectos de css

Estructura de los hijos del estilo SCSS+BEM cuando el padre tiene un modificador

Question

Por favor, es posible establecer scss para el elemento dentro --rounded? No quiero usar .box__something, pero necesito modificar los elementos secundarios que dependen del modificador principal

<div class="box">
    <div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
    <div class="box__something">Hi</div>
</div>

.box {
    &__something {
        background: blue;
    }
    &--rounded {
        background: green;

        .box__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

Answer 1

El modificador no se debe usar en el elemento primario, y el elemento secundario .box__something

Answer 2

Si entiendo tu problema correctamente, ¡siento tu dolor! Tan pronto como anida una propiedad anidada & cambia al padre.

Sin embargo, puede almacenar en caché el nombre de clase original como una variable como esta:

$box: box;

.#{$box} {
    .#{$box}__something {
        background: blue;
    }
    .#{$box}--rounded {
        background: green;

        .#{$box}__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

El único problema con el método anterior es que terminas con un mayor volumen de CSS compilado. Esto rinde a:

.box .box__something {
  background: blue;
}
.box .box--rounded {
  background: green;
}
.box .box--rounded .box__something {
  background: pink;
}

Para reducir el tamaño de la salida, puede combinar & con el método de la variable como sigue:

.box {
  $box: &;
    &__something {
        background: blue;
    }
    &--rounded {
        background: green;

        #{$box}__something {
            background: pink;
        }
    }
}

Esto rinde a:

.box__something {
  background: blue;
}
.box--rounded {
  background: green;
}
.box--rounded .box__something {
  background: pink;
}

De esa forma puedes cambiar el nombre de la clase en la variable y todo se actualiza, también creo que se lee un poco mejor.

Answer 3

Sass no tiene ninguna gran solución integrada para resolver su problema, este es un problema que ha sido explorado muchas veces. Sin embargo, puede obtener el resultado que busca de una manera poco elegante usando el & helper para unirse a las clases a las que desea unirse. He incluido un ejemplo en vivo aquí .

Mientras esto funciona, debes darte cuenta de que si quieres .box--rounded estilo a la clase .box--rounded directamente, debes tenerla dentro de su propia clase como se ilustra a continuación, no puedes usarla con la clase final & clase que hemos colocado &__something .

Te recomiendo jugar con mi esencia sassmeister y ver qué resultados puedes obtener.

.box {
    &__something {
      background: blue;
    }
    &--rounded {
      background: green;
    }
    &--rounded & {
      &__something {
        background: pink;
    }
  }
}

Espero que esto haya resuelto tu problema.