-1

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

例如：使用LESSvars 来存储颜色，或链接到 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 {}

ETC...

4

3 回答 3

1

我认为你需要再抽象一点

文件 #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 不必将其变量定义从主题更改为主题。

于 2013-07-03T16:19:03.913 回答
1

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

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

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

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

于 2013-07-03T09:11:13.523 回答
1

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

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

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

于 2013-07-03T08:31:48.083 回答