具有 ID 的元素的基础 sass 覆盖属性答案

【问题标题】：Foundation sass override property for an element with ID具有 ID 的元素的基础 sass 覆盖属性
【发布时间】：2015-01-12 06:08:49
【问题描述】：

如何使用 Foundation 和 Sass 覆盖具有特定 ID 的元素的属性？

我有一个<section id='myid'> 并想为此覆盖一些属性：

#myid {
   background: blue;
   color: white;
}

如果我将它放入 CSS 文件或 app.scss 文件中，它将不会被应用。它在编译文件中，但默认设置仍然优先。

如何强制这些设置具有最高优先级？

【问题讨论】：

【解决方案1】：

您需要考虑 CSS 的“特殊性”，#id 通常优先，但这实际上取决于首先声明规则的方式。我不是 Foundation 的专家，但您可以在 CSS-Tricks 上阅读有关该主题的更多信息：http://css-tricks.com/specifics-on-css-specificity/

一个快速而肮脏的解决方案是在属性上使用!important 标志，但我建议您仅作为最后的手段：

#myid {
   background: blue !important;
   color: white !important;
}

【讨论】：

我知道如何在纯 CSS 中执行此操作，但在我的情况下，它不够具体，无法覆盖 Foundation 设置。因此，我正在寻找一种可以正确覆盖 Sass / Foundation 方面的解决方案。
您的问题与 CSS 特异性有关。独立于预处理器/框架，它仍然是 CSS，因此通过检查元素，您可以看到选择器是如何使用并覆盖它们的。如果您需要具体情况的帮助，您可能需要发布一些代码。
我知道我的问题与 CSS 特异性有关，但我在解决它时遇到了问题。我也知道 Foundation/Sass 都有一些标准样式设置，但我不太熟悉。也许他们有一个标准的方法来使用变量、mixin 或其他方式来解决这些问题。
可能值得调查 Foundation 配置变量，看看是否有一个可以解决您的问题。但是，根据您的实际问题，您应该检查元素（例如：使用 Chrome 控制台或 Firefox/Firebug），并查看使用的选择器，以便您可以复制这些选择器并应用您的更改。