用 jsp/html 中的内联变量覆盖较少的变量属性/值答案

【问题标题】：override less variable property/value with inline variable in jsp/html用 jsp/html 中的内联变量覆盖较少的变量属性/值
【发布时间】：2013-05-29 14:40:37
【问题描述】：

我有一种情况，我必须用用 jsp/html 编写的内联变量覆盖较少的变量属性/值。我在主文件（abc.less）中定义了几个变量如下：

@bodyColor: rgb(88,90,91); // (#585a5b) grayish @brandColor1: rgb(23,59,107); // (#173b6b) dark

我在 jsp/html 中编写了以下用于更改颜色的变量，我使用与主文件相同的变量名称。

@bodyColor: rgb(255,0,0); // (#ff0000) redish @brandColor1: rgb(204,204,204); // (#cccccc) grayish

但它覆盖了主文件属性，请告诉我它是如何工作的。提前致谢。

【问题讨论】：

为什么不将 Less 样式表编译成常规 CSS？
@Blender，我在主文件的 20 种样式中使用 brandColor1 变量，并想一次性替换它们的颜色。如果我通过常规 css 来完成，我必须复制每个样式并粘贴到我的 jsp/html 中。在 jsp/html 文件中，我必须更改每种样式的颜色。

标签： css less lesscss-resources

【解决方案1】：

您可以创建一个文件，其中定义的所有颜色为colors.less

@bodyColor: rgb(255,0,0); // (#ff0000) redish
@brandColor1: rgb(204,204,204); // (#cccccc) grayish

然后在所有其他less文件的顶部添加以下语句，

@import "colors.less";

这样就不需要更改所有文件的颜色，只需在colors.less 文件中更改它，它将在所有其他地方更新。

您可以使用相同的方法来定义和重用样式、mixin 和其他变量。

【讨论】：