时间戳

首页 > 解决方案 > scss根据最顶层的父级修改规则

sass - scss根据最顶层的父级修改规则

问题描述

让我们建议我们有以下scss代码：

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

这将输出以下css：.a .b .c

现在，如果我想修改.cif.a获取另一个类的规则集，我将不得不像这样修改我的 scss：

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

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

如果多处修改，我的scss会变得很长，引用的规则会乱七八糟.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 层嵌套，以根据仪表板的状态为按钮指定一些样式（即侧边栏打开）。我当然可以直接向按钮添加一个类并像那样设置它的样式，但是在 imo 中，这有点过头了，因为对于这种特定状态，样式表中有很多不同的东西会发生变化。

举一个完整的例子，当我点击这个特定按钮时，侧边栏应该会弹出，其他一些重叠的元素应该被推到右边等等。我的 javascript，只是将状态表示类添加到整个仪表板，并且我想相应地设置所有样式。但这样一来，不幸的是，不同元素的风格相去甚远。

标签： sass

解决方案

您可以使用

假设您可以在第一级有 3 个班级，即x, y, z他们的子班级a, b。

然后您的 scssvariable代码将如下所示：

$classes: (
 x: (
   a: (
      color: blue,
      font-size: 15px
     ),
   b: (
      color: blue,
      font-weight: 600
   )
 ),
 y: (
   a: (
      color: red,
     ),
   b: (
      color: blue,
      font-size:20px
   )
 ),
z: (
  a: (
      color: black,
      overflow: scroll
     ),
   b: (
      color: black,
      font-size: 20px,
      background-color: white
   )
 )
);

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

@each $key, $value in $classes {
 .#{$key} {
   @each $key1, $value1 in $value {
     .#{$key1} {
       @each $key2, $value2 in $value1 {
          #{$key2}: $value2
       }
      }
   }
 }
}

如果您以后想添加更多类，则需要遵循相同的结构并相应地添加类名和样式。

结果 (CSS)

.x .a {
  color: blue;
  font-size: 15px;
}
.x .b {
  color: blue;
  font-weight: 600;
}

.y .a {
  color: red;
}
.y .b {
  color: blue;
  font-size: 20px;
}

.z .a {
  color: black;
  overflow: scroll;
}
.z .b {
  color: black;
  font-size: 20px;
  background-color: white;
}

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

推荐阅读