SASS scss-重写现有占位符（静默类）

我一定不理解SASS不允许重写现有静默类（占位符）的想法。以下面的代码为例

%testing {
  font-size: 1em;
}
%testing {
  font-size: 4em;
}
.i-expect-4em {
  @extend %testing;
}

为什么会输出以下内容

.i-expect-4em {
  font-size: 1em;
}
.i-expect-4em {
  font-size: 4em;
}

---

这两个类都是在我的目标是能够在流的后面但在输出之前优化静默类的地方输出的。

您得到的输出是预期的。Sass中普通类和静默类之间的唯一区别是在生成的CSS中找不到静默类的选择器。将静默类更改为普通类，以查看实际发生的情况：

.testing {
  font-size: 1em;
}
.testing {
  font-size: 4em;
}
.i-expect-4em {
  @extend .testing;
}

输出：

.testing, .i-expect-4em {
  font-size: 1em;
}

.testing, .i-expect-4em {
  font-size: 4em;
}

---

这不仅正常，而且非常有用

想象一下这样的情况：

.testing {
  font-size: 1em;
}
.testing {
  font-weight: bold;
}
.i-expect-4em {
  @extend .testing;
}

如果它不能扩展这两个属性，您将失去其中一个属性。这也不是问题，因为顺序是保留的，并且不会更改计算样式。

---

gzip将大大减少大小开销。

您可以使用sass映射作为替代，而无需占位符

$sizes: (
    testing-1: 5em,
    testing-2: 10em,
    testing-3: 15em
);


h1 {
   font-size: map-get($sizes, testing-2);
 }

输出

h1 {
  font-size: 10em;
}

例如：

您可以通过以下方式“覆盖”静默类

%item {
  // common properties
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

%leader { @extend %item;
  // extra properties
  min-width: auto;
  display:flex;
  .....
}

.loud_class_one { @extend %leader;
  font-size: 2em;
}

.loud_class_two { @extend %leader;
  color: green;
}

---

不要害怕用另一个静默类@extend一个静默类

你是说没有办法覆盖或重新定义静默类吗？它们可以被覆盖/重新定义，就像普通类可以被覆盖/重新定义一样。所以回答你的问题：不。