使用 sass 自动增加类特异性

Question

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

示例：

.test {
    color: #fff;
}

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

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

Answer 1

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

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

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

div.test {
    color: #fff;
}

如果所有其他方法都失败，您可以尝试将代码块移至 SCSS 文件中的较低位置，因为如果文档中的最后一个选择器具有相同的特异性，则它们将获胜。或者，最后给它一个好！重要的。

.test {
    color: #fff !important;
}

Answer 2

有多种方法： - 您可以使用

!important

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

了解有关特异性的更多信息

Answer 3

这个答案有点蹩脚，我对某些使用样式对象而不是 css/scss/sass 的 React 框架有自己的问题。我不想覆盖所有组件，我只是想覆盖该特定组件。

/** button.module.scss */
.specificButton {
  color: red; /* doesn't work */
}

.specificButton, .specificButton {
  color: red; /* works */
}

现在可以正常使用了

import React from 'react'
import styles from './button.module.scss'

const specificButton = () => {
  return (
    <Button className={styles.specificButton}>
      My Beautiful Specific Button made with my SCSS OCD
    </Button>
  )
}

大多数情况下，您只需将 css 类加倍即可增加特异性。但如果不起作用，请尝试3次。如果你召唤了其他东西，请不要向我抱怨。