SCSS扩展嵌套的选择和覆盖嵌套规则集

好了，所以我有一个嵌套选择一个占位符：SCSS扩展嵌套的选择和覆盖嵌套规则集

%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，它也扩展了％块，它们合并时没有任何问题。

来源

2013-04-18 Todilo

这似乎只是它的工作方式..看看嵌套参考.. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE。html＃nested_rules –

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

@extend指令不仅仅是一种使用类代替mixin的方式（类似于LESS风格的mixin调用）。

.block { 
    font-size:12px; 
} 

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

输出：为什么@extend作品，当你延长正常上课，而不是继承类它的方式变得清晰

.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; 
}

来源

2013-04-18 15:15:57 cimmanon

谢谢你。这对我们的项目来说是一个成功的决定因素。你知道另一个css预处理器或者一个合并后的scss实用工具吗？ – nknj

这是相当多了。 SASS分别生成扩展声明。

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

但是您不必担心CSS的清洁问题。现代Web服务器提供CSS压缩，所有重复将被很好地压缩。

来源

2013-04-18 15:19:47

没错，这只是我不安的自动化表演enhancher。谢谢 – Todilo

-2

您可以使用一个工具，我用它来清洁的CSS https://github.com/addyosmani/grunt-uncss

“从与UnCSS您的项目删除未使用的CSS咕噜的任务。”

来源

2015-09-07 16:42:40 XAVIER

OP没有询问如何删除未使用的规则，而是询问如何覆盖SCSS @extend（）中包含的规则。 – Civilian

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

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

不知道它是否也适用于@extend。

来源

2017-04-26 14:08:43 brannigan

SCSS扩展嵌套的选择和覆盖嵌套规则集

回答

相关问题