LESS / Joomla T3 中复杂的配色方案定义

Question

我正在基于 T3 框架的 Joomla 3 中构建站点。

我是第一次使用 LESS，但对 CSS 有经验。

网站将有不同主题的着陆页。除了配色方案外，这些都将相同。

我正在尝试在 T3 'variables' less 文件中设置配色方案，然后实现颜色 - 许多核心组件的颜色会有所不同 - 例如 H1、P、DIV 背景颜色等

因此，如果我为泰国页面设置主色，我会在 variables.less 文件中创建此规则：

@thai: #e55092;

然后我对 LESS 是如何编译成 CSS 的了解一落千丈，我失去了整个思路。

因为我现在希望能够在 T3 模板中为泰国设置登陆页面。我需要能够在这个页面的不同地方使用 class 'thai' - 例如，H1 文本应该是彩色的 #e55092，aside 背景应该是#e55092，HR 应该是 #e55092 ... 仅适用于此页面。

我希望这不是一个过于开放的问题，但实现此目标的最佳实践是什么，同时保持我的代码干净和快速？我目前的想法是，我按照以下方式在 LESS 中创建了一大堆规则：

thai.h1 { color: @thai }

thai.button [ background-color: @thai }

（请原谅语法 - 对 LESS 很陌生，不确定什么是可能的或正确的）

但这不是违背了使用 LESS 的初衷吗？

Answer 1

我认为你的问题确实很广泛。根据您的情况：

一个 CSS 文件用于所有页面。您可以考虑 changing selector order 按钮的代码如下所示：

.按钮{ 边框：1px 纯白色； .thai & { background-color: red;} .japanese & { 背景颜色：黄色;} }

在您的 HTML 页面中：<body class="thai"> 等等..

在 Less 你可以 override a variable by putting the definition afterwards 您应该首先定义一个主文件，对于按钮示例，此 button.less 文件应包含如下所示的内容：

@button-background-color: orange;
button { background-color: @button-background-color; }

现在您可以按如下方式定义泰语主题文件(thai.less):

@import "button.less";
@button-background-color: red;

编译不同的 CSS 文件

lessc button.less --modify-var="button-background-color=red" thai.css

Complicated colour scheme definition in LESS / Joomla T3