Question

所以我想说'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>

有人知道这个神奇的咒语是什么吗？

Answer 1

css不支持。你能做的最好就是：

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

Answer 2

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

Answer 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;}

在某些情况下可能足够好

Answer 4

如果您希望进一步推动CSS而不是使用前面帖子中概述的一些技巧，那么您应该查看CSS编译器。他们使用你编写的类似CSS的代码，通常添加一些技巧的CSS，并将它们转换为网络的普通CSS。

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

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



数学 - 这与变量密切相关。假设您的左列是100px，右列是500px，而您的包装div是600px。好吧，也许你决定把它改成960px。如果您的列宽自动调整会不会很棒？答案是肯定的。



嵌套样式 - 这可能是最重要的。 CSS是平的，这意味着复杂的网站最终会使用CSS，这很难实现。

您可以在blog post on the subject中阅读有关热门编辑器的信息，或者进行一些搜索并找到最适合您的编辑器。

我可以在另一个css定义中包含css定义吗？

4 个答案: