Question

我想根据body ID

为变量设置不同的颜色

<body id="theme1">

#theme1{
    @brand-color:red;
}
#theme2{
    @brand-color:green;
}

h1{color:@brand-color}

Answer 1

您不能将 Less variables 用作CSS 属性，而应使用值。你需要做的是定义两个与你想要的两种颜色相关的不同变量，然后根据主题ID调用相关的变量：

<body id="theme1">
<body id="theme2">

@brand-color-1: red;
@brand-color-2: green;

#theme1 {
  color: @brand-color-1;
}
#theme2 {
  color: @brand-color-2;
}

这将编译为以下内容（使用<div>代替<body>）：

＆＃13;

#theme1 {
  color: red;
}
#theme2 {
  color: green;
}

＆＃13;

<div id="theme1">
  Theme 1
</div>
<div id="theme2">
  Theme 2
</div>

＆＃13;

希望这有帮助！：）

Answer 2

在处理id时，您必须使用#符号来表示CSS

.符号用于类选择器

像这样修改你的代码

<body id="theme1">

#theme1{
    @brand-color:red;
}
#theme2{
    @brand-color:green;
}
h1{
    color:@brand-color
}

根据正文ID声明较少的变量

2 个答案: