Css SCS扩展嵌套选择器并重写嵌套规则集

好的，我有一个带有嵌套选择器的占位符：

%block {
  .title {
    font-size:12px;
  }
}

我想扩展它并添加到

.title

类中：

.superblock {
  @extend %block;
  .title {
    font-weight:bold;
  }
}

我想要的答案是：

.superblock .title {
  font-size: 12px;
  font-weight: bold; }

然而，我得到的答案是：

.superblock .title {
  font-size: 12px; }

.superblock .title {
  font-weight: bold; }

---

是我做错了什么，还是就是这样？为了澄清，我想合并它。如果我直接在

.superblock

中添加一些东西，然后像另一个

.superblock2

一样添加，这也扩展了%block，那么它们合并时不会出现任何问题。

Sass没有“合并”重复选择器的功能。编译CSS后，您需要找到另一个实用程序来执行此操作

@extend

指令不仅仅是使用类代替mixin的一种方式（类似于风格较少的mixin调用）。当您扩展普通类而不是扩展类时，

@extend

为什么会以这种方式工作变得很清楚：

.block {
  font-size:12px;
}

.foo {
    @extend .block;
    font-weight: bold;
}

输出：

.block, .foo {
  font-size: 12px;
}

.foo {
  font-weight: bold;
}

.superblock .title {
  font-size: 12px;
  font-weight: bold;
}

使用扩展类只会抑制原始类名的发出

既然您已经了解了

@extend

为何如此工作，您还想要

@extend

提供的功能吗？如果答案为“否”，则需要使用mixin：

@mixin block {
    // styles
    .title {
        font-size: 12px;
        @content;
    }
}

.superblock {
    @include block {
        font-weight: bold;
    }
}

输出：

.block, .foo {
  font-size: 12px;
}

.foo {
  font-weight: bold;
}

.superblock .title {
  font-size: 12px;
  font-weight: bold;
}

---

差不多就是这样。SASS单独生成扩展声明

而且它没有按选择器对声明进行分组的功能，它也没有那么聪明

---

但是你不必太担心CSS的清洁度。现代web服务器提供CSS gzip，所有复制都将被很好地压缩。

你可以使用一个工具，我用它来清理CSS

---

“一项繁重的任务，用于使用UNCS从项目中删除未使用的CSS。”

LESS可以做到这一点。不管你怎么写：

.superblock {
  .title {
    .block .title;
  }
}

---

不确定它是否也适用于@extend。

这似乎就是它的工作方式。。查看嵌套引用。。诚然，这只是我内心的自动性能增强器让我坐立不安。感谢you@run_the_race，我认为你错了。OP的“想要”和“得到”代码片段在功能上是等效的。你说得对，我删除了我的非增值注释。谢谢你。这将成为我们项目的一个破坏者。您知道另一个css预处理器或后scss实用程序进行合并吗？OP不是问如何删除未使用的规则，而是问如何覆盖scss@extend（）中包含的规则。