本文介绍了你如何为已经在 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 中声明的嵌套类编写简写?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-27 15:07