Question

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

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

myblue = #33CC99

CSS中的

说...

background-color:myblue;

HTML中的

说...

<td color="myblue"/>

和JavaScript

tag.style.backgroundColor = myblue;

我猜这是不可能的，谷歌没有任何改变，所以有没有人有任何想法？我怀疑我是唯一遇到这个问题的人。

Answer 1

一种非常有前途的产品，它将变量等高级表达式“编译”到CSS中LESS。它需要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 ?>
}

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

您可以查看一些处理器：

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或JSP页面来获取CSS。

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中没有“变量”的概念，但我强烈建议不做你正在做的事情。没有充分的理由不能将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。

Answer 10

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

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

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

10 个答案: