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（带有alt）：

   <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 我使用了属性选择器，其中类以[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");

如何为已经在SASS / SCSS中声明的嵌套类编写速记？

3 个答案: