Tengo un html simple y CSS con BEM. Quiero un estilo para la clase .BLOCK__ITEM-HAEAD-STARK INTERIOR CLASE .BLOCK__ITEM-HEADER - HAY-ROUND . Utilizo CSS .BLOCK__ITEM-HEADER - HAY-REDONDO .BLOCK__ITEM-HEADER-MARK {/ Styling aquí /} . Pero no creo que esta sea una buena sintaxis.

Mi pregunta es:

  1. Cómo llamar .block__item-encabezado-marca dentro .BLOCK__ITEM-HEADER - ¿Se ha convertido en una mejor sintaxis en mi código SCSS?
  2. ¿Mi sintaxis de BEM es buena?

Código

.block {
  &__item {
    &-header {
      &--has-round {
        /* How to call .block__item-header-mark with better syntax ??? */
        .block__item-header-mark {
          /*overide style*/
        }
      }
      &-mark {
        /*normal style*/
      }
    }
  }
}
<div class="block">
  <div class="block__item">
    <div class="block__item-header block__item-header--has-round"><span class="block__item-header-mark"></span></div>
    <div class="block__item-body"></div>
  </div>
</div>
3
Phát Nguyễn 15 jul. 2019 a las 06:07

1 respuesta

La mejor respuesta

Puede crear una variable para referirse al alcance que desea

.block {
  &__item {
    &-header {
      $header: &;
      &--has-round {
        #{ header }-mark {
          /* override style */
        }
      }
      &-mark {
        /*normal style*/
      }
    }
  }
}
1
iagowp 16 jul. 2019 a las 04:18