Question

如何构建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 {}

等...

Answer 1

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

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

此主题的变体应涵盖它。

Answer 2

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

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

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

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

Answer 3

我认为你需要抽象更多

文件＃1：所有可能的颜色，Img等等定义

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

/*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）导入此文件（或此文件之前），然后使用这些“通用”变量来定义您的实际类，mixins等。这样，每个主题都是为输出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的通用引用的接口不必将其变量定义从主题更改为主题。

构建样式表以管理外观或主题

3 个答案:

我认为你需要抽象更多