你怎么写的那个已经在SASS / SCSS声明嵌套类速记？(How do you write the

正如你所看到的，我有一个变化.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:

您可以保存主类在这样的变量

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

    &__content {
        // SOME CSS properties
    }
}

另一种选择是把修改的
.mainContainer__content如.mainContainer__content--alt

Answer 2:

检查此链接： https://www.w3schools.com/Css/css_attribute_selectors.asp我uesed属性选择其中类结尾[class$="value"]

.mainContainer {

    // SOME CSS properties

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

        .mainContainer__content {

            // SOME CSS properties

        }
    }

    &[class$="__content"] {

        // SOME CSS properties

    }

}

但同样我不建议这样写。

Answer 3:

you can try this.   

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

文章来源: How do you write the shorthand for a nested class that has already been declared in SASS / SCSS?