简单的 SASS 模块类不能为了特殊性而一起工作答案

【问题标题】：Simple SASS modules classes can’t work together for specificity简单的 SASS 模块类不能为了特殊性而一起工作
【发布时间】：2022-01-26 14:23:58
【问题描述】：

我希望能够不必使用!important，而只需使用更具体的选择器即可解决。以这个元素为例：

<div>
    <p className={`${headerStyles.headerOuter} ${bodyStyles.something} ${otherStyles.another}`}>Test</p>
</div>

它使用三个类，每个类都定义在单独的 css 模块化文件中：

import headerStyles from ‘…’
import bodyStyles from ‘…’
import otherStyles from ‘…’

假设 headerStyles.module.scss 包含：

.headerOuter {
    color: blue;
}

bodyStyles.module.scss 包含：

div .something {
    color: red;
}

而 otherStyles.module.scss 包含：

.another {
    color: green;
}

p 将显示红色文本，因为 bodyStyles 更具体。

但我希望能够在 headerStyles.module.scss 中做到这一点：

.headerOuter {
    &.another {
        color: blue;
    }
}
// or .headerOuter.another

这样 headerOuter 和 another 可以一起工作以比 bodyStyles 具有更高的特异性，以强制元素应用蓝色文本。但是问题是headerStyles和otherStyles好像不能互相识别。

如何解决这个问题？

我在这里做了一个类似的演示，文本应该是黑色的，但不是：https://codesandbox.io/s/css-modules-react-forked-mxtt6 - 查看 another.module.scss，文本应该是黑色

谢谢

【问题讨论】：

标签： css sass

【解决方案1】：

来自代码笔

color: black 选择器是：

._src_another_module__another._src_another_module__something

虽然实际元素的类是：

_src_test_module__test
_src_sassy_module__something
_src_another_module__another

第二个元素的类包含“sassy”，它与选择器不同，这就是它不匹配的原因。

您可以使用 DevTools 进行检查。 blue 和 red 样式显示为已覆盖，green 具有更多特异性，但 black 甚至不适用于下图所示的元素。

编辑

我认为缺乏关于实际工具行为的信息，或者只是一个误解。它构建名称的方式是_src + _<file_name> + _<selector_name>。

话虽这么说：

/* The final style from "another.module.scss. */

._src_another_module__something {
  color: red;
}

._src_another_module__bling {
  background: #eee;
  font-family: sans-serif;
  text-align: center;
}
._src_another_module__bling button {
  background: red;
}

._src_another_module__another {
  color: blue;
}
._src_another_module__another._src_another_module__something {
  color: black;
}

注意@import './sassy.module.scss' 与黑色无关，它只是用不同的命名复制了样式。

<!-- The final element with it's classes. -->

<p class="_src_test_module__test _src_sassy_module__something _src_another_module__another">
    test
</p>

注意：所有代码均来自codepen。

文本不是黑色的，因为您在 sassy.module.scss 的导入中包含了选择器 something 和 ${style.something}，因此该类将被命名为 _src_sassy_module__something（即红色）。

如果还没有，我建议您经常使用 DevTools 检查结果。

【讨论】：

Sassy 只是文件名，不在类名中 - 类是 {${testStyles.test} ${styles.something} ${anotherStyles.another}}。关键是您应该能够输入&.something，因为该元素具有两个类，但我不明白为什么当另一个选择器位于另一个文件中时它无法识别它。它应该显示在您的屏幕截图中，但 SASS 没有正确创建选择器
嗯，它 (sassy) 实际上在类名中。让我更新答案以包含更多信息。
哦，我明白你的意思了。在这种情况下，如果不使用 !important 或在同一个 .another.module.scss 文件中创建另一个新类，就没有更好的方法来显示蓝色（来自 .another 选择器）？我不敢相信 SASS 不能同时使用来自不同文件的两个类！
我不确定您的要求，但是您是否尝试过只使用类名？我的意思是，不将它们用作对象。只需输入class="test something another"，然后将样式模块导入为import 'your.module.scss'。我确信这样它会起作用，因为命名根本不会改变。
我宁愿使用带有对象的模块。我很惊讶当它们在不同的文件中时无法一起使用它们

【解决方案2】：

<p className={`${testStyles.test} ${styles.something} ${anotherStyles.another}`}>test</p>

它不起作用的原因是最新的 calssname 是 another 正在被调用，它不会影响您对添加到元素的先前类所做的操作，这里是东西。在您正在导入 sassy.module.scss 的 scss 文件 another.modules.scss 中，这会更新 something 类的样式，但不会影响最新类另一个的样式。

`@import './sassy.module.scss';

.another {
  color: blue;

  &.something {
   color: black; // should be black
  }
 }

【讨论】：