SCSS 扩展嵌套选择器并覆盖嵌套规则集

Posted 2023-03-06

【中文标题】SCSS 扩展嵌套选择器并覆盖嵌套规则集

【英文标题】：SCSS extend a nested selector and override the nested rulesets

【发布时间】：2013-04-11 18:28:51

【问题描述】：

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

%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-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules

【参考方案1】：

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

@extend 指令不仅仅是一种使用类代替 mixin 的方法（类似于 LESS 样式的 mixin 调用）。当您扩展普通类而不是扩展类时，为什么 @extend 的工作方式会变得很清楚：

.block 
  font-size:12px;


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

输出：

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


.foo 
  font-weight: bold;

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

既然您已经了解了为什么 @extend 会以这种方式工作，您还想要 @extend 提供的东西吗？ 如果答案是否定的，那么您需要使用 mixin：

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


.superblock 
    @include block 
        font-weight: bold;
    

输出：

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

【讨论】：

谢谢。这对我们的项目来说是一个交易破坏者。您是否知道另一个 css 预处理器或 post-scss 实用程序可以进行合并？

【参考方案2】：

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

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

但您不必担心 CSS 的清洁度。现代网络服务器提供 CSS gzipped，所有的重复都将被很好地压缩。

【讨论】：

没错，只是我内心的自动性能增强器让我不安。谢谢

@run_the_race，我认为你错了。 OP 的“want”和“get”代码 sn-ps 在功能上是等效的。

你说得对，我删除了我的非增值评论。

【参考方案3】：

你可以使用一个工具，我用它来清理 css https://github.com/addyosmani/grunt-uncss

“使用 UnCSS 从项目中删除未使用的 CSS 是一项艰巨的任务。”

【讨论】：

OP 不是询问如何删除未使用的规则，而是询问如何覆盖 SCSS @extend() 中包含的规则。

【参考方案4】：

LESS 可以做到这一点。但是你会写：

.superblock 
  .title 
    .block .title;
  

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