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

我们有许多图像是基于颜色主题（例如蓝色，红色，灰色......）实际拾取的。我们在每个主题下创建具有通用名称的文件（例如背景，...），有没有办法在常见的地方定义颜色主题，以便可以抽象出定义。这将阻止我改变整个CSS文件的颜色主题。是否可以抽象出CSS中的颜色主题定义

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

来源

2010-08-03 user339108

您可以使用任何服务器端脚本语言（如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?> 
}

来源

2010-08-03 05:31:50

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

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

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

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

来源

2010-08-03 05:32:51 Adrian

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

他们是两个CSS扩展的语言，除其他事情做这种颜色的东西，你提提供的变量。

来源

2010-08-03 05:39:44

+1：this this。两个都做得很好的环境。如果您使用.NET，请参阅dotlesscss.com – Rob 2010-08-03 05:42:50

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

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

你可以使用一个工具，如http://lesscss.org/（如果你喜欢红宝石）来创建主题的CSS文件。

我们使用NAnt来做类似于此的事情（不是CSS，但是有相同的想法），并且它节省了一堆时间，而不是维护多个只有值不同的文件。

来源

2010-08-03 05:45:18

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

回答

相关问题