将CSS样式压缩为一种风格

Question

考虑以下CSS样式......

.Center { text-align: center; }
.R { float: right; }
#TopImage { background: #0ff; }

如果我想将所有三种样式应用于元素，我会这样做......

<div class="R Center" id="TopImage">

但如果我要使用这种风格组合数百次，那么用单一风格替换它们会更容易......

.All_Together ( background: #0ff; text-align: center; float: right; )
<div class="All_Together">

我想知道，如果不是单独定义All_Together，我可以简单地定义它：

.All_Together = .Center + .R + #TopImage

显然，它不可能完全像那样写。但有没有办法告诉我的网页每个实例.All_Together都具有.Center，.R和#TopImage的所有值。或者，换句话说，我该如何制作.All_Together继承其他几个特定类和/或id的价值？

Answer 1

像LESS和SASS这样的工具（部分）是为了这个目的而制作的。

它们允许您以这样的方式定义类，然后您可以将它们组合在一起，当您将LESS或SASS编译为CSS时，您将拥有三个单独的类样式，但也是您的组合。

Answer 2

我只是想在给出最终答案之前检查一下，为什么你不能只使用：

.All_Together{
text-align:center;
float:right;
background:#0ff;
}

并将其链接到外部样式表，因此如果您对css进行更改，它会反映在使用该样式的所有页面上？

另外，我建议您选择LESS，它是一个出色的工具，可以让您完全按照您的说法进行操作。您可以设置可以编译为单独样式的变量。有关更多信息，请访问：LESS Website

Answer 3

那么，将一切重新命名为一种风格会更容易，那么为什么不拥有一堆呢？简单地：

 #TopImage, .R, .Center { 
    text-align:center; 
    float:right; 
    background:#0ff; 
}

注意逗号。应该工作得很好。此外，我不确定你是否注意到，但养成不在这样的属性之间放置空格的习惯：color: #FFFFFF。有时CSS会对此感到怪异。只是一个侧面的事情。希望这有帮助！