你如何为已经在 SASS/SCSS 中声明的嵌套类编写简写? [英] How do you write the shorthand for a nested class that has already been declared in SASS / SCSS?

问题描述

如您所见，我有一个 .mainContainer 的变体，形式为 &--alt.但是，我需要在 &--alt 类中重复 .mainContainer__content 来说明如果在父容器，则 .mainContainer__content 将具有不同的样式.

有没有更好的方法来写这个，因为如果我要在这个特定的例子中写出完整的类名，它似乎违背了使用速记版本的目的.

CSS:

.mainContainer {//一些 CSS 属性&--alt {.mainContainer__content {//一些 CSS 属性}}&__内容{//一些 CSS 属性}}

HTML:

 
<div class="mainContainer__content">//一些风格

HTML(带 alt):

 
<div class="mainContainer__content">//其他风格

解决方案

你可以像这样将主类保存在一个变量中

.mainContainer {$self: &;//一些 CSS 属性&--alt {#{$self}__content {//一些 CSS 属性}}&__内容{//一些 CSS 属性}}

另一种选择是将修饰符放在
.mainContainer__content 例如.mainContainer__content--alt

As you can see, I have a variation for .mainContainer in the form of &--alt. However, I need to repeat .mainContainer__content inside the &--alt class to say that if there's a .mainContainer--alt in the parent container, then .mainContainer__content will have a different styling.

Is there a better way to write this as it seems to defeat the purpose of using the shorthand version if I am going to write out the complete class name in this particular example.

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 (with alt):

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

解决方案

You can save the main class in a variable like this

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

    &__content {
        // SOME CSS properties
    }
}

Another option is to put the modifier on the
.mainContainer__content e.g. .mainContainer__content--alt

这篇关于你如何为已经在 SASS/SCSS 中声明的嵌套类编写简写?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！