干出我的 CSS，但想保留基本的 CSS 语法答案

【问题标题】：DRY out my CSS, but want to keep the basic CSS syntax干出我的 CSS，但想保留基本的 CSS 语法
【发布时间】：2010-11-24 01:15:06
【问题描述】：

开始一个新的 Rails 项目，我们有一个经过深思熟虑的调色板，并希望在一个地方捕捉它。我通常在 CSS 中保留颜色，但我发现在许多不同的选择器中我最终都得到了相同的颜色，因为它显示为背景颜色、颜色、边框颜色等。我偶尔也会需要访问颜色在 Javascript 中。最好只定义每种颜色一次。

所以我只想以一种可在 CSS 和 Javascript 中重用的方式定义我的调色板，但我不想一直使用 SASS，完全放弃 CSS 语法。

是否已经制作了允许这样做的rails插件？我可以拼凑一个 ERB 类型的解决方案，但如果其他人有现成的东西，我不想这样做。

【问题讨论】：

注意/更新：SASS 已经放弃了受 HAML 影响的语法，转而采用更多的 CSS，例如花括号/大括号、分号和冒号（用于变量定义）
是的，SCSS 格式在这一点上显然是一个不错的选择——我已经在几个项目中使用过它。对于 Javascript 繁重的应用程序，Csster (github.com/ndp/csster) 效果很好。它是 Javascript 对象文字格式的 CSS 实现，以及用于颜色管理的类似 Sass 的函数。它真的是你的，所以看看吧！

【解决方案1】：

另一种（纯 CSS）方式可能是将每种颜色定义一次，并让多个选择器与该 oe 颜色定义相关联，例如：

body,
p,
#foo,
.bar {color: #802369 }

【讨论】：

【解决方案2】：

有几个服务器端解析器，如 LESS 和 SASS，但如果你想在纯 CSS 中使用调色板思维，你必须扭转你的想法。定义颜色、字体等基本样式，并在标签级别应用多个类。

[风格]

.color1{颜色：红色}

.color2{颜色:蓝色}

.color3{颜色：绿色}

.bcolor1{颜色：红色}

.bcolor2{颜色：蓝色}

.bcolor3{颜色：绿色}

[/style]

[标签 class="color1 bcolor2"]

这对我们来说效果很好。

【讨论】：

这当然消除了 CSS 的主要优势，因为它消除了文档和样式之间的间接性。
出于 Doug 给出的原因，我反对这一点（如果您要直接将类名与其所代表的样式相关联，则最好使用内联样式）。但是，有一种相关技术允许您同时使用有意义的选择器/类名和减少冗余样式 - 请参阅：stackoverflow.com/questions/47487/…（但请注意，这些技术都没有为 ndp 共享的愿望做任何事情不同样式之间的颜色定义）。
这与内联样式完全不同，您只是定义分配了一种颜色，而不是该颜色是什么。您正在使用类组合有效地创建一个独特的颜色类。把它想象成光明和黑暗。
重新投票，因为这篇文章没有错误或没有帮助。这是主观的，虽然我不同意这个帖子，但它没有错。

【解决方案3】：

LESS 似乎有一个rails plugin，并且语法更像 css。

【讨论】：

【解决方案4】：

有一个名为 {less} 的新项目听起来像您正在寻找的：http://lesscss.org/

【讨论】：