Структура детей SCSS + BEM, когда у родителя есть модификатор

Question

Возможно установить scss для элемента внутри - вокруг? Я не хочу использовать .box__something, но мне нужно изменить детям, что это зависит от родительского модификатора

<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

У Sass нет отличных встроенных решений для решения вашей проблемы, это проблема, которая неоднократно изучалась. Тем не менее, вы можете добиться результата, который вы будете слегка слегка изящным способом, используя вспомогательный помощник &, чтобы присоединиться к классам, к которым вы хотите присоединиться. Я включил живой example here.

В то время как это делает работу, вы должны понимать, что если вы хотите, чтобы стиль .box--rounded класса непосредственно вы должны иметь его в своем собственном классе, как показано ниже, вы не можете использовать его с задними & класса, который мы поместили &__something дальше.

Я рекомендую вам поиграть с моим sassmeister gist и посмотреть, какие результаты вы можете придумать.

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

Я надеюсь, что это решило вашу проблему.

Answer 2

Модификатор должен быть использован не на родителей, а дочерний элемент .box__something

Answer 3

Если я понимаю ваш проблема правильно, я чувствую вашу боль! Как только вы вложите вложенное свойство &, измените родительский элемент.

Однако можно кэшировать имя исходного класса в качестве переменной, как это:

$box: box; 

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

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

Единственная проблема, связанная с описанным выше способом является то, что вы в конечном итоге с большим объемом скомпилированный CSS. Это оказывает:

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

Для уменьшения размера выходного сигнала можно объединить & с переменным методом, как так:

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

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

Это оказывает:

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

Таким образом, вы может изменить имя класса в переменной, и все будет обновлено, я также думаю, что он читает немного лучше.