Как написать сокращение для вложенного класса, который уже был объявлен в SASS / SCSS?

Question

Как видите, у меня есть вариант для .mainContainer в виде &--alt.Однако мне нужно повторить .mainContainer__content внутри класса &--alt, чтобы сказать, что если в родительском контейнере есть .mainContainer--alt, то у .mainContainer__content будет другой стиль.

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

CSS:

.mainContainer {

    // SOME CSS properties

    &--alt {

        .mainContainer__content {

            // SOME CSS properties

        }
    }

    &__content {

        // SOME CSS properties

    }

}

HTML:

   <div class="mainContainer">
      <div class="mainContainer__content">
        // some style
      </div>
    </div>

HTML (с альтернативным кодом):

   <div class="mainContainer mainContainer--alt">
      <div class="mainContainer__content">
        // some other style
      </div>
    </div>

Answer 1

проверьте эту ссылку: https://www.w3schools.com/Css/css_attribute_selectors.asp Я использовал селектор атрибутов, где класс заканчивается на [class$="value"]

.mainContainer {

    // SOME CSS properties

    &[class$="--alt"] {

        .mainContainer__content {

            // SOME CSS properties

        }
    }

    &[class$="__content"] {

        // SOME CSS properties

    }

}

, но опять же я не рекомендую писать его таким образом.

Answer 2

you can try this.   

 @mixin generate-sizes($class) {
        .#{$class}__content {
           font-size: 12px;
          }
        .#{$class}--alt {
          font-size: 14px; 
        }
    }
    @include generate-sizes("mainContainer");

Answer 3

Вы можете сохранить основной класс в такой переменной, как эта

.mainContainer {
  $self: &;
    // SOME CSS properties
    &--alt {
        #{$self}__content {
            // SOME CSS properties
        }
    }

    &__content {
        // SOME CSS properties
    }
}

Другой вариант - поместить модификатор на
.mainContainer__content, например, .mainContainer__content--alt