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

Question

我有一个蓝色的颜色，我想在我的应用程序的许多地方使用，目前我正在我的CSS中的样式之间复制和粘贴它。 有没有一种方法可以定义一个常量，如标准颜色，'蓝色'，'红色'等，我可以在我的CSS，我的HTML和我的JS之间分享？

我想能够说（某处，最好是CSS）

myblue = #33CC99

在CSS说...

background-color:myblue;

在HTML中说...

<td color="myblue"/>

并在JavaScript中

tag.style.backgroundColor = myblue;

我猜这是不可能的，谷歌什么都没有，所以有没有人有任何想法？ 我怀疑我是唯一遇到这种情况的人。

Answer 1

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

更原始的方法是使用像PHP这样的服务器端脚本语言。

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

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

然后使用<?=MYBLUE;?>输出所需的值

大缺点：要在外部css和js文件中执行此操作，您显然必须由PHP解释器解析它们，如果您有大量访问者，这不是很好的性能。 对于低流量站点，它可能无关紧要。

Answer 2

是的，这是不可能的。 但是，您可以编写自己的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/

Answer 3

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

Answer 4

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

.color_class {color: #33CC99;}

然后在我的HTML中调用它

<td class="color_class" />

您可以为HTML元素分配多个类。

在JS中，只需命名该类

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

当然，你可以玩你想要如何选择你的元素。 JS库可能有更简单的方法来分配CSS类。

Answer 5

要在不使用任何动态CSS的情况下实现这一点（例如，使用内容类型text/css提供PHP文件），最好的办法是将您定义“主题”的地方分开。

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

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

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

Answer 6

正如其他用户已经注意到的那样，除非你通过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％ - 这意味着主题的选项受到非预期的依赖性的严重限制。

Answer 7

我是在构建时通过Freemarker运行我的CSS文件来完成的。

Answer 8

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

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

或类似的规定

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

Answer 9

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

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

Answer 10

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

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

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

然后你可以在CSS中独立定义那些，la：

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

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

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

如果您想要动态生成颜色选择，唯一真正的方法就像其他人建议的那样，既可以在部署之前预处理文件，也可以使用您选择的语言动态生成和提供CSS。