使用 sass 自动增加类特异性答案

【问题标题】：Increase class specifity automatically with sass使用 sass 自动增加类特异性
【发布时间】：2018-07-11 11:52:37
【问题描述】：

我需要增加给定类选择器的类特异性。

例子：

.test {
    color: #fff;
}

目前我需要输入 .test.test 来增加特异性。

是否有另一种方法来解决这个问题，比如函数 increase() 或其他增加它而不附加相同类名的方法？

【问题讨论】：

总是加not(#radomThingHere)这样你会增加更多的ID
这就是我想要避免的。我需要一个显式函数 increase() 或 override()。
我对 SASS 没有经验，但我的想法是创建该函数，该函数将自动为您想要的任何类附加 :not(#radomThingHere)
假设increase() 函数如您所描述的那样存在，您希望它如何影响您生成的CSS？ Sass 只是一个创建 CSS 的工具。如果用 CSS 做不到，那么用 Sass 也做不到。
我希望它在我的 css 选择器的最后部分添加一些内容： Like .my-class:not(false) => 它应该添加 :not(false)

标签： css sass styles mixins

【解决方案1】：

如果您使用的是 SCSS，那么最简单的方法（除了使用 !important 强制它之外）是包含一个父选择器，以便它具有更高的特异性：

.parent {
    .test {
        color: #fff;
    }
}

另一种方法是同时定位元素（如果它始终是相同类型的元素）。这也将赋予它更高的特异性。

div.test {
    color: #fff;
}

如果所有其他方法都失败了，您可以尝试将代码块移到 SCSS 文件中的下方，因为如果文档中的最后一个选择器具有相同的特异性，则它们将获胜。或者，给它一个好的 ol' !important 最后。

.test {
    color: #fff !important;
}

【讨论】：

这个答案并没有解决我的问题，但它给了我一些正确方向的想法。如果有人使用 webpack 并且需要一种自动化的方式来增加 css 的特异性：github.com/havsar/styleable-loader

【解决方案2】：

有多种方法： - 你可以使用!important，这样你就不需要复读两次了。但这是一个不好的做法。 - 最好的方法 - 您可以将类代码放在最后，这样即使特异性相同，最后一个也会覆盖以前的。 - 您可以使用父选择器或标签选择器，但这会使代码依赖于该父选择器或标签。 - 你可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity了解更多关于特异性的信息

【讨论】：

把你的代码放在最后。这是解决您问题的正确方法
很遗憾我不能指定顺序（webpack style-loader）。
你有什么选择？编辑html或css文件？