Sass SCS基于最顶层父级修改规则_Sass

Sass SCS基于最顶层父级修改规则

sass

Sass SCS基于最顶层父级修改规则,sass,Sass,我们建议使用以下scss代码： .a { .b { .c { // rules here } } } 这将输出以下css:.a.b.c 现在，如果我想修改.c的规则集，如果.a获得另一个类，我必须修改我的SCS，如下所示： .a { .b { .c { // rules here } } &.d { .b {

我们建议使用以下scss代码：

.a {
    .b {
        .c {
            // rules here
        }
     }
}

这将输出以下css:

.a.b.c

现在，如果我想修改

.c

的规则集，如果

.a

获得另一个类，我必须修改我的SCS，如下所示：

.a {
    .b {
        .c {
            // rules here
        }
     }

     &.d {
        .b {
            .c {
              // rules here
            }
        }
     }
}

如果有多个修改，我的SCS将变得很长，引用

.c

的规则将被删除。难道没有更简单的语法，将

.c

的所有规则都保存在代码中，这样当我需要修改某些内容时，就更容易了吗？我在考虑以下几点：

.a {
    .b {
        .c {
            // rules here

            ^^&.d {
               // go up 2 selectors (hence twicte the ^), and add to the selector the `.d` class, then keep on modifying the current selector `.c` here
            }
        }
     }
}

编辑：我用于指定选择器路径中的每个元素（或大多数元素，任何情况下），因此我的选择器尽可能明确。上面的例子可以反映在仪表板按钮中，它位于仪表板的深处，使用基本方法，我必须复制5个嵌套级别，以便根据仪表板的状态（即侧边栏打开）为按钮指定某种样式。当然，我可以直接向按钮添加一个类，并将其设置为那样的样式，但在我看来，这太过分了，因为对于这个特定的状态，样式表中有很多不同的内容需要更改

作为一个完整的例子，当我点击这个特定的按钮时，边栏会弹出，一些其他元素会重叠，会被推到右边，等等。我的javascript只是将表示类的状态添加到整个仪表板中，我想对所有内容进行相应的样式设置。但不幸的是，这样一来，不同元素的样式就相去甚远了。

您可以使用

来构造嵌套的类和样式
迭代每个键/值对以发出样式

假设您可以在第一级上有3个类，即

x、y、z

，它们的子类

，

然后，您的scss

变量

代码将如下所示：

$classes:(
x:(
a:(
颜色：蓝色，
字体大小：15px
),
b:(
颜色：蓝色，
字号：600
)
),
y:(
a:(
颜色：红色，
),
b:(
颜色：蓝色，
字号：20px
)
),
z:(
a:(
颜色：黑色，
溢出：滚动
),
b:(
颜色：黑色，
字体大小：20px，
背景颜色：白色
)
)
);

现在我们可以迭代上述变量，如下所示：

@每个$key，$class中的$value{
.#{$key}{
@每个$key1，$value1以$value表示{
.#{$key1}{
@$value1中的每个$key2、$value2{
#{$key2}:$value2
}
}
}
}
}

如果您想在将来添加更多的类，那么您需要遵循相同的结构并相应地添加类名和样式

结果（CSS）

.x.a{
颜色：蓝色；
字体大小：15px；
}
.x.b{
颜色：蓝色；
字号：600；
}
y.a{
颜色：红色；
}
.y.b{
颜色：蓝色；
字体大小：20px；
}
.z.a{
颜色：黑色；
溢出：滚动；
}
.z.b{
颜色：黑色；
字体大小：20px；
背景色：白色；
}

我希望它能解决您的问题并美化您的代码。