Question

我们有许多实际上根据颜色主题（例如蓝色，红色，灰色......）拾取的图像。我们在每个主题下创建具有通用名称的文件（例如背景，......），是否有一种方法可以在一个公共位置定义颜色主题，以便可以抽象出定义。这会阻止我在整个css文件中更改颜色主题。

body {
    background: url('../img/blue/background.png');
    font-size: 13px;
    margin: 0px;
}

Answer 1

虽然这里提出的选项是可行的方法，但我想提及SASS和LESS

它们是两种CSS扩展语言，除了其他功能之外，还提供了用于执行此类颜色的变量。

Answer 2

您可以使用任何服务器端脚本语言（如PHP）创建动态CSS文件。

style.css.php：

<?php
header("Content-type: text/css");
$theme = 'blue';
$color1 = '#fefefe';
?>

body {
    background: url('../img/<?=$theme?>/background.png');
    font-size: 13px;
    margin: 0px;
}

.sometext {
    color: <?=$color1?>
}

Answer 3

我不相信您可以使用纯css实现，因为您需要在使用某些逻辑设置的变量中定义图像的基本路径（switch语句，if / else if，.. etc。）然后在css中使用该变量。

以下是我想到的一些选项。如果你创建一个伪css文件，你的变量被定义为一个不在css中出现的字符串（例如：$ basePath），并将这个伪css文件中的所有css规则构建为“$ basePath + image.jpg”。然后使用一些服务器端代码检索css文件并通过将$ basePath +替换为该主题的实际基本路径来创建模板css文件。然后，服务器端代码将这些css文件保存为theme1.css，theme2.css，...等。

然后，您可以使用url变量在主题之间切换，使用某些服务器端代码插入对正确的css主题文件的引用。

这样您只需要维护伪模板css文件。虽然每次更改模板css文件时都需要重新运行css创建代码，以便更新主题css文件。

Answer 4

在CSS中不是原生的 - 但是您可以编写一些脚本来从具有变量替换的模板编译主题CSS文件。我建议使用'布局'和'颜色'css。无论用户使用哪种主题，布局都是一致的。颜色css仅包含每个主题更改的设置。

<style type="text/css">
    @import ulr(layout.css);
    @import ulr(theme_<?= $activeTheme ?>_.css);
</style>

您可以使用http://lesscss.org/等工具（如果您喜欢Ruby）来创建主题CSS文件。

我们将NAnt用于类似于此的东西（不是CSS，但同样的想法），它节省了大量时间，而不是维护仅由值不同的多个文件。

是否可以在CSS中抽象出颜色主题定义

4 个答案: