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

Question

我有一种情况，我必须用用 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

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

Answer 1

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

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

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

@import "colors.less";

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

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