CSS SCSS 扩展嵌套选择器并覆盖嵌套规则集
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16086377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SCSS extend a nested selector and override the nested rulesets
提问by Todilo
Ok so I have a placeholder with a nested selector:
好的，所以我有一个带有嵌套选择器的占位符：
%block {
.title {
font-size:12px;
}
}
I want to extend it and ADD to the .titleclass:
我想扩展它并添加到.title类中：
.superblock {
@extend %block;
.title {
font-weight:bold;
}
}
The answer I WANT is this:
我想要的答案是这样的：
.superblock .title {
font-size: 12px;
font-weight: bold; }
However, the answer I get is this:
然而，我得到的答案是这样的：
.superblock .title {
font-size: 12px; }
.superblock .title {
font-weight: bold; }
Am I doing something wrong or is this just how it works? To clarify I want to merge it. If I add something directly inside the .superblockand add like another .superblock2which also extends %block they merge without any problems.
我做错了什么还是这就是它的工作原理？为了澄清我想合并它。如果我直接在里面添加一些东西，.superblock并像另一个一样添加.superblock2，它也扩展了 %block 它们合并没有任何问题。
回答by cimmanon
Sass has no functionality for "merging" duplicate selectors. You'll need to find another utility to do this after the CSS has been compiled.
Sass 没有“合并”重复选择器的功能。在编译 CSS 后，您需要找到另一个实用程序来执行此操作。
The @extenddirective isn't just a way to use classes in place of mixins (similar to LESS style mixin calls). Why @extendworks the way it does becomes clear when you're extending normal classes instead of extend classes:
该@extend指令不仅仅是一种使用类代替 mixin 的方法（类似于 LESS 风格的 mixin 调用）。@extend当您扩展普通类而不是扩展类时，为什么以这种方式工作就变得很清楚了：
.block {
font-size:12px;
}
.foo {
@extend .block;
font-weight: bold;
}
Output:
输出：
.block, .foo {
font-size: 12px;
}
.foo {
font-weight: bold;
}
Using an extend class just suppresses the emission of the original class name.
使用扩展类只会抑制原始类名的发出。
Now that you've seen why @extendworks the way it does, do you still want what @extendoffers?If the answer is no, then you need to use a mixin:
既然您已经了解了为什么会这样@extend运作，您还想要什么@extend优惠吗？如果答案是否定的，那么您需要使用 mixin：
@mixin block {
// styles
.title {
font-size: 12px;
@content;
}
}
.superblock {
@include block {
font-weight: bold;
}
}
Output:
输出：
.superblock .title {
font-size: 12px;
font-weight: bold;
}
回答by Andrey Mikhaylov - lolmaus
This is pretty much it. SASS produces extended declarations separately.
这差不多了。SASS 单独生成扩展声明。
And it has no functionality of grouping declarations by selector, it's not that smart.
而且它没有按选择器对声明进行分组的功能，它不是那么聪明。
But you need not worry that much about CSS cleanness. Modern web servers serve CSS gzipped, all duplication will be nicely compressed.
但是您不必太担心 CSS 清洁度。现代 web 服务器提供 CSS gzip 压缩，所有重复都将被很好地压缩。
回答by br4nnigan
LESS can do that. However you would write:
LESS 可以做到这一点。但是你会写：
.superblock {
.title {
.block .title;
}
}
Not sure if it works with @extend too.
不确定它是否也适用于 @extend。
回答by XAVIER
You can use a tools, I used it to clean the css https://github.com/addyosmani/grunt-uncss
你可以使用一个工具，我用它来清理 css https://github.com/addyosmani/grunt-uncss
"A grunt task for removing unused CSS from your projects with UnCSS."
“使用 UnCSS 从项目中删除未使用的 CSS 是一项艰巨的任务。”
