如何在不复制 CSS 的情况下覆盖 SASS 样式 [重复]答案

【问题标题】：How to override SASS style without duplicating CSS [duplicate]如何在不复制 CSS 的情况下覆盖 SASS 样式 [重复]
【发布时间】：2015-05-18 02:31:22
【问题描述】：

我对 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。

【问题讨论】：

标签： css sass

【解决方案1】：

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

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

那么在scss中你可以：

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

或

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

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

希望有帮助。

编辑

你可以编译你的 sass，然后通过一个 css tidy 运行它，这将删除重复的类和东西，或者在答案http://zmoazeni.github.io/csscss/ 中尝试那个 ruby gem。

【讨论】：

感谢您的回复！ :) 这有助于快速修复，但我仍然会从我永远不会使用的库中获得我无用的 .twitter-foo 类，然后我不想要它。我想重新定义它！有办法吗？
重新定义是什么意思？
我使用那个库是因为它有很多不错的功能，但在某些情况下，让我们说血腥-> .twitter-foo，我只是想要它，如果我在第一个定义之后重写，然后重新定义整个类。没有纪念品！这可能吗？
不，Sass 没有开箱即用。您也许可以找到一个 sass 缩小工具，该工具将删除重复和冗余类。为什么不直接从库中删除该类是你想要的混乱。
我不这样做的原因是，当我从凉亭中拉出库时，我会破坏对存储库所做的任何更改，这些更改可能对我想要的几个类有用改变。令人难以置信的是，SASS 开发人员没有考虑为 CSS 输出透明地覆盖 SASS 中的类，就像他们认为永远不会有 SASS 库一样！