如何在不复制CSS的情况下覆盖SASS样式

Question

我对SASS很新,我目前正在使用SASS编写的库.我不仅要覆盖这个库中的变量,还要覆盖几个样式的样式.如何在不重复特定类的CSS的情况下覆盖此样式？

为了清楚起见,假设我在我的库中有这个类,我在main.scss中导入:

.twitter-foo {
    float: none;
}

现在在我自己的文件中:

.twitter-foo {
    float: a lot more;
}

然后我的输出是:

.twitter-foo {
    float: none; // overriden!
}
.twitter-foo {
    float: a lot more;
}

好吧它工作但它很脏,我讨厌重复代码,而不是提到稍长的页面加载.如果我想.twitter-foo从我的库重新定义,我该怎么做才能避免臃肿的CSS？

编辑:我不是在谈论SASS和CSS输出之间的中间件(缩小器？),但实际上只是SASS.

Answer 1

您可以做的是更具体，这意味着添加更多选择器，以便您可以以不同的方式定位 .twitter-foo。尝试给你的 body 标签一个页面 id 或你的主要元素，这是我通常做的。所以...

<body id="page1">
</body>

然后在 scss 中你可以：

#page1 .twitter-foo {
   float:none;
}

或者

要覆盖或不覆盖，请将 !important 添加到样式末尾，例如：

.twitter-foo {
    float:none !important;
 }

希望有帮助。

编辑

您也许可以编译您的 sass，然后通过 css tidy 运行它，这将删除重复的类和内容，或者尝试答案中的 ruby gem http://zmoazeni.github.io/csscss/。

我不这样做的原因是，当我从 Bower 中提取库时，我会破坏存储库中对其所做的任何更改，我可能会发现这些更改仅对我想要更改的几个类有用。令人难以置信的是，SASS 开发人员没有考虑为 CSS 输出透明地覆盖 SASS 中的类，就像他们认为永远不会有 SASS 库一样！ (2认同)