将 CSS 样式压缩为一种样式答案

【问题标题】：Condensing CSS Styles into One Style将 CSS 样式压缩为一种样式
【发布时间】：2014-04-29 23:43:36
【问题描述】：

考虑以下 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 的值？

【问题讨论】：

标签： css

【解决方案1】：

LESS 和 SASS 之类的工具（部分）就是为此目的而设计的。

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

【讨论】：

【解决方案2】：

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

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

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

另外，我建议您查看 LESS，它是一款出色的工具，可让您完全按照您所说的去做。您可以设置可以编译成单独样式的变量。更多信息请访问：LESS Website

【讨论】：

【解决方案3】：

好吧，与其将所有东西都重命名为一种风格会更容易，那么为什么不拥有一堆呢？简单地说：

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

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

【讨论】：