css - 全局 CSS 颜色方案 / 皮肤

Question

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

我要做的是构建CSS文件，使整个站点的配色方案统一并重复使用颜色，这样我就可以在一个地方更改值并更改整个站点。这个概念看起来像这样：

.SiteBaseColor {颜色：西耶娜；}

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

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

Answer 1

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

如果您通过 php 生成它，则相同，只需为模式创建 5 个不同的入口点并包含正确的入口点...

Answer 2

可悲的是，CSS 不支持变量。您必须使用 CSS 预处理器，如Less或xCSS，或使用 PHP 片段：

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

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

Answer 3

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

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

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