我可以在另一个 CSS 定义中包含一个 CSS 定义吗？答案

【问题标题】：Can I include a css definition in another css definition?我可以在另一个 CSS 定义中包含一个 CSS 定义吗？
【发布时间】：2010-02-12 23:45:00
【问题描述】：

假设我在 'foo.css' 中有以下内容：

.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

现在假设我有两个需要边框的 div，所以我这样做：

<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>

这很好用，但是我发现在我的css文件中定义#foo和#bar时，我宁愿给它们.border的特征而不是给div的类，如下所示：

.border { border : solid 1px; }
#foo {
  <incantation to inherit from .border>
  color : #123;
}
#bar {
  <incantation to inherit from .border>
  color : #a00;
}

然后我的html就是：

<div id="foo">Foo</div>
<div id="bar">Bar</div>

有人知道那个魔法咒语是什么吗？

【问题讨论】：

标签： css

【解决方案1】：

css 不支持。您可以做的最好的事情是：

#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

【讨论】：

题外话，我要补充一点，当使用border 速记时，值的正确顺序是border-width，然后是border-style，然后是border-color。因此，border: solid 1px 是无效的 CSS，它应该是 border: 1px solid。目前，浏览器对此类错误非常宽容，但这不是无限期依赖的东西。
好点，我只是复制了 OP 的样式而没有修改实际规则。
我不能真正做 #foo,#bar,.border{border:solid 1px} 的事情，因为我想要的真正定义是在我热链接到的 jquery-ui css 文件中这就是我需要上述解决方案的原因。感谢您的回复，知道它只是无法完成是有帮助的。另外，我不知道边境命令的事情。谢谢。
除非您从 Google 这样的 CDN 引用 jquery-ui，否则您应该考虑托管您需要的 css 文件并相应地修改它们。

【解决方案2】：

您可能对mixins with Sass 感兴趣。 Sass 让您可以使用这样的技巧以更有效的方式编写 css 样式表。 Mixins 允许您定义一组属性（例如，与边框有关），然后将这些属性包含在某些 css 类中。

【讨论】：

嗯，很有趣。我已经在使用 haml，因此将 sass 用于我的 css 内容将是自然而然的下一步，并解决了这个特定的 css 缺点。感谢大家的回复！

【解决方案3】：

正如 Wsanville 所说，您不能使用该课程。但是正常的 CSS 继承确实有效 - 假设你的 html 是

<div class="border">
    <div id="foo">
       hello
    </div>
    <div id="bar">
       world
    </div>
</div>

你可以说

.border {border: 1px solid #f00;}
#foo {border:inherit;}

在某些情况下可能就足够了

【讨论】：

【解决方案4】：

如果您希望进一步推动您的 CSS，而不是使用前面文章中概述的一些技巧，您应该研究 CSS 编译器。他们将您编写的类似 CSS 的代码（通常是添加了一些技巧的 CSS）转化为 Web 的普通 CSS。

David Ziegler 写了一些很酷的 CSS 编译器提供的功能：

变量 - 优秀的程序员不喜欢硬编码。在许多情况下，您可以通过使用良好的继承在 CSS 中避免这种情况，但有时这是不可避免的。对于变量，更改配色方案意味着更新一个变量而不是 13 个属性。

数学 - 这与变量密切相关。假设你的左栏是 100px，你的右栏是 500px，你的包装 div 是 600px。好吧，也许您决定将其更改为 960 像素。如果你的列的宽度自动调整，那不是很棒吗？答案是肯定的。

嵌套样式 - 这可能是最重要的。 CSS 是扁平化的，这意味着复杂的网站最终会使用难以通过的 CSS。

您可以在他的blog post on the subject 中了解流行的编译器，或者进行一些搜索并找到最适合您的编译器。

【讨论】：