Css 基于主体ID声明较少的变量_Css_Less

Css 基于主体ID声明较少的变量

css less

Css 基于主体ID声明较少的变量,css,less,Css,Less,我希望根据主体id为变量使用不同的颜色 <body id="theme1"> #theme1{ @brand-color:red; } #theme2{ @brand-color:green; } h1{color:@brand-color} #主题1{ @品牌颜色：红色； } #主题2{ @品牌颜色：绿色； } h1{color:@brand color} 在处理id时，您必须使用符号作为css 符号用于类选择器像这样修改代码 <body id="t

我希望根据主体id为变量使用不同的颜色

<body id="theme1">

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

h1{color:@brand-color}


#主题1{
@品牌颜色：红色；
}
#主题2{
@品牌颜色：绿色；
}
h1{color:@brand color}

在处理

id

时，您必须使用

符号作为css

符号用于类选择器

像这样修改代码

<body id="theme1">

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


#主题1{
@品牌颜色：红色；
}
#主题2{
@品牌颜色：绿色；
}
h1{
颜色：@品牌颜色
}

您不会将用作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; }

主题1 主题2
你不能直接使用
主题1
？hashtag表示id。点表示类别。主题1根据用户所在站点的哪个部分而变化，即产品可能会使用主题2，那么您不能只使用
主体
？这取决于你想如何分解你的颜色。如果两个主题都需要不同的颜色，则需要同时使用
#theme1
和
#theme2
。请注意，Less编译为CSS时，对HTML一无所知，因此，当发生这种情况时，Less编译器不知道您的
正文id是什么，因此它无法显示任何@品牌颜色值。好吧，有许多不同的方法来实现您想要的，从阅读左侧的“Related”-Q/As here开始，并使用以下关键字进行搜索“主题化”等，以找到一些常见的解决方案。是的，对不起，这是一个输入错误。这是您想要的还是您想要的其他东西？对不起，我尝试了这一点，但它不起作用，因为您不能声明变量两次？即@brand-color@ScottPedder--我已更新了答案以涵盖此内容：）