构建样式表以管理皮肤或主题[关闭]答案

【问题标题】：Structure a stylesheet to manage skins or themes [closed]构建样式表以管理皮肤或主题[关闭]
【发布时间】：2013-07-03 08:09:16
【问题描述】：

如何构建CSS 或LESS 文件来管理皮肤或主题？

例如：使用LESS vars 来存储颜色，或链接到 img 模式，如果我更改此文件，网站的外观会发生变化......但我真的不知道如何继续，我的意思是更好怎么办？

颜色变量（dark/middle_dark/basic/middle_light/light）并对所有基本颜色执行相同操作

/*neuter*/
@g_d_neuter: #3c3c3c; /*etc...*/

/*blue*/
@g_d_blue: #2D4B55; /*etc...*/

但是对于 CSS 类，我不知道如何构建它。我可以这样做吗：

.g_plans {
    padding: 10px;
    background-color: @g_l_neuter;
    border: solid 1px @g_ml_neuter;
 }
.g_titles {}
.g_texts {margin-bottom: 10px;}
.g_items {background-color: @g_l_neuter;}
.g_labels {}

等等……

【问题讨论】：

我不明白你的要求。您能否举例说明“结构”的含义？
相当模糊。一个例子可以帮助我们回答，也可以告诉我们你已经做了一些事情......
@icedwater 我只是编辑问题看看...

标签： css less

【解决方案1】：

第一个想法是使用不同的 CSS 文件，然后使用一些 JavaScript 或 PHP 变量编写引用它们的 <link>：

<link href = "<?php echo $_request['theme_name'] ?>" rel = "stylesheet" />

这个主题的变体应该涵盖它。

【讨论】：

谢谢，但问题不是如何应用，而是如何构建 CSS 文件，我只是编辑问题看看...
啊，终于明白了。对不起。 >_

【解决方案2】：

通常，您不会创建包含来自不同主题的元素的 CSS 文件。

将主题保存在单独的 CSS 文件中可以使主题隔离并简化维护和重新测试。

除非在查看文档时通常会定期切换主题。即使是这种情况，也没有理由不能用不同的 CSS 文件实现不同的主题。

（无论 CSS 文件是静态生成的，还是使用 LESS 等预处理器动态生成的）

【讨论】：

【解决方案3】：

我认为你需要再抽象一点

文件 #1：所有可能的颜色、图像等定义

在此文件中，您可以定义所有可能的颜色、要使用的图像等。

/*neuter*/
@g_d_neuter: #3c3c3c; /*etc...*/

/*blue*/
@g_d_blue: #2D4B55; /*etc...*/

文件 #2：主题定义文件（这里可能是您的“中性”主题）

您将颜色定义（文件 #1）包含在此文件中，以便它可以使用文件 #1 中的颜色、图像等定义更多“通用”变量名称。

@backgroundColor: @g_d_neuter; /*etc...*/
@borderColor: @someColorValueForNeutralThemeBordersDefinedInFirstFile;

文件 #3：CSS 构建文件

要构建主题，请将该主题文件（文件 #2）导入此文件（或在此文件之前），然后使用这些“通用”变量来定义您的实际类、mixin 等。这样，每个主题都是为输出 CSS 定义相同的必要变量集。

.g_plans {
    padding: 10px;
    background-color: @backgroundColor;
    border: solid 1px @borderColor;
 }
.g_titles {}
.g_texts {margin-bottom: 10px;}
.g_items {background-color: @backgroundColor;}
.g_labels {}

总结

本质上，文件 #1 是您的样式，文件 #3 是您的视觉结构和样式应用，文件 #2 是将特定颜色变量从文件 #1 更改为允许文件 #3 的通用引用的接口不必将其变量定义从一个主题更改为另一个主题。

【讨论】：