Question

我一定不能理解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;
}

两者都输出，我的目的是能够在流程中稍后但在输出之前优化静默类。

Answer 1

您打算获得的输出。 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;
}

Answer 2

这不仅是正常的，而且非常有用。

想象一下这样的情况：

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

如果它不会扩展它们，你将丢失其中一个属性。此外，它不是问题，因为订单被保留，它不会改变计算样式。 gzip将大大减少大小开销。

Answer 3

您可以使用sass地图作为没有占位符的替代方案

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


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

输出

h1 {
  font-size: 10em;
}

示例：http://sassmeister.com/gist/4828e67e45eb4857a8bf

Answer 4

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

%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其他沉默的一个沉默的课程

SASS scss - 覆盖现有占位符（静默类）

4 个答案: