全局 CSS 颜色方案 / 皮肤答案

【问题标题】：Global CSS Color Scheme / Skin全局 CSS 颜色方案 / 皮肤
【发布时间】：2010-02-27 15:50:02
【问题描述】：

我正在使用 CSS 构建一个需要可换肤/可品牌化的网站。用技术术语来说，对于每个“品牌”，我在数据库中都有一组五个颜色值。

我要做的是构建CSS文件，使整个网站的配色方案统一，颜色被重用，所以我可以在一个地方改变值，它会改变整个网站。这个概念看起来像这样：

.SiteBaseColor {color:sienna;}

p {字体大小：50;颜色:SiteBaseColor;}

有没有办法完成这样的事情？

【问题讨论】：

在@Pekka 的评论的基础上，我将解释如何。以防万一。在为您的问题提供的每个答案旁边都有一个勾号的轮廓。单击您认为最佳答案您的问题的答案旁边的勾号。如果否答案适合您，请编辑问题以更好地解释您的问题。

【解决方案1】：

为什么不直接写 6 个 css 文件呢？一个用于所有内容（没有方案颜色），每个颜色一个。然后你只需要包含你需要的那个。

如果你通过 php 生成它也是一样的，只需为模式创建 5 个不同的入口点并包含正确的入口点...

【讨论】：

【解决方案2】：

遗憾的是，CSS 不支持变量。您必须使用 CSS 预处理器，如 Less 或 xCSS，或使用 PHP sn-ps：

<? $ourColor = "#FF0000"; ?>

.....
div.content { color: <?php echo $ourColor; ?> }

【讨论】：

【解决方案3】：

如果您想调查预处理器的选择（我最喜欢这种情况），我同意 Pekka，但我的选择是 sass，我认为它比 less 强大..

使用 css 预处理器，您可以编写一个 sass 文件广告，而不是在 6 个不同的 css 文件中编译它，每次只需更改颜色变量...

但是，如果您必须从数据库中提取颜色，在 css 文件中使用 php sn-ps 可能会更简单..

【讨论】：