我可以制作可以在 CSS、JS 和 HTML 之间共享的自定义颜色定义吗？

一个非常有前途的产品，将更高级别的表达式（如变量）“编译”到 CSS 中是 LESS。它需要 Ruby。我还没有用过它，但绝对值得一看。

一种更原始的方法是使用服务器端脚本语言，如 PHP。

您可以在 PHP 中定义常量，如下所示：

define ("MYBLUE", "#33CC99");

然后在需要的地方输出值<?=MYBLUE;?>

最大的缺点：要在外部 css 和 js 文件中执行此操作，您显然必须让 PHP 解释器解析它们，如果您有很多访问者，这在性能方面并不好。对于一个低流量的网站，这可能并不重要。

是的，这是不可能的。但是，您可以编写自己的 CSS 预处理器（或使用现有的预处理器之一），例如使用 PHP。最大的缺点是您必须使用 PHP 在整个站点上输出颜色代码，并且您的脚本将看起来像

tag.style.backgroundColor = <? echo $myblue; ?>

在CSS中也是如此

.someClass {
  background-color: <? echo $myblue ?>
}

或类似的东西。这也不是很好。当然，您可以使用您选择的任何服务器端脚本语言。据我判断，这是在整个网站中使用颜色常量的唯一可能性。

您可以查看一些处理器：

• http://cssp.codeplex.com/
• http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
• http://icant.co.uk/articles/cssconstants/

为了在不使用任何动态CSS的情况下实现这一点（例如，提供带有content-type的PHP文件），最好的办法是将定义“主题”的位置分开。text/css

<script type="text/javascript">
   var theme = '#003366';
 </script>

然后，您可以使用 JavaScript 文件根据主题写出样式。

但是，如果您能够使用 CSS 预处理器，请继续使用它。您将拥有更大的灵活性，并且代码将更易于维护。我几乎总是使用 PHP 或 JSP 页面进行 CSS。

您可以查看 HAML+SASS。虽然你不能同时为这三种语言定义变量，但这两种语言可以使编写HTML+CSS变得更加容易。

我如何处理这个问题是在我的 CSS 中创建一个类。

.color_class {color: #33CC99;}

然后在我的 HTML 中调用它

<td class="color_class" />

可以将多个类分配给一个 HTML 元素。

在 JS 中，只需命名类

document.getElementById('id').className = 'color_class';

当然，你可以随心所欲地选择你的元素。JS 库可能有更简单的方法来分配 CSS 类。

正如其他用户所指出的，除非您通过 CGI/PHP/ASP 脚本传递所有 HTML、JS 和 CSS 内容，否则您不能直接在 HTML、JS 或 CSS 中执行此操作 - 这实际上并不是一个糟糕的方法，因为它易于维护。

如果您在对包含的 CSS/JS 文件的引用中使用查询字符串 - 例如 '/css/stylesheet.php？timestamp=2010-01-01+00：00：00'，那么几乎所有客户端都会积极地缓存您的 CSS/JS 文件，从而抵消在脚本语言中解析它们可能对负载产生的任何影响（尽管除非网站可能特别繁忙，否则我不会对此有太多联系）。

如果您使用的是 Apache（这很有可能），另一种方法是使用 mod_set 之类的东西为您即时重写所有 HTML、JS 和 CSS 文件。如果您不熟悉配置 Apache（或正在使用其他 Web 服务器），则可能更难支持。

关于标签命名：

无论采用哪种方法，我都强烈建议使用清晰的标记系统来表示动态变量（例如 %MyBlue%），并考虑让变量名称具有代表性（例如 %HeadingBackgroundColor%、%FontColor%，即使两者都设置为 %MyBlue%），因为这样可以防止以后事情变得棘手（当您发现更改一个值会产生预期后果时）。

乍一看，使用更具代表性的名称似乎不必要地冗长，但在许多情况下会引起问题，因为当颜色与原始方案明显不同时，颜色最终会以意想不到的方式发生冲突（许多主流软件都是如此，因为作者假设 %value1% 和 %value2% 总是在一起，%value1% 和 %value3% 也是如此——这意味着主题选项实际上是受到意外依赖的严重限制）。

我在构建时通过Freemarker运行我的CSS文件来做到这一点。

CSS中没有“变量”的概念，但我强烈建议不要做你正在做的事情。没有充分的理由不能将 CSS 工作表中的所有样式信息定义为 CSS 类。如果你这样做，然后只是在html和javascript中应用上述类，那么在复制和粘贴方面，这是一个主要的负担。

其次，请记住，您可以为一个元素定义多个 CSS 类，例如

<div class='blue-text white-background'>my content</div>

然后，您可以在 CSS 中独立地定义它们，例如：

.blue-text { color : Blue; }
.white-background { background-color: white;}

您甚至可以创建仅在同时应用两者时才生效的规则：

.blue-text.white-background { color : AliceBlue; }

如果你想动态生成颜色选择，唯一真正的方法是按照其他人的建议，要么在部署之前预处理你的文件，要么让你选择的语言动态生成和提供CSS。

我不确定你的最终目标是什么。如果要允许为网页选择多个主题之一，您可以简单地拥有多个 CSS 文件，以及用户首选样式表的 cookie/会话变量/数据库存储。然后你可以做

 <link rel=<? echo stylepref; ?> type='text/css'>

或类似的东西

如果您希望能够完全自定义网站，则需要上述答案之一。

在纯客户端 CSS 分组选择器允许您在许多不同的元素上放置相同的颜色：

p, .red, #sub, div a:link { color: #f00; }