css - 根据 body ID 声明 less 变量

标签 css less

我想根据 body id 为变量设置不同的颜色

<body id="theme1">

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

h1{color:@brand-color}

最佳答案

你没有使用 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>):

#theme1 {
  color: red;
}
#theme2 {
  color: green;
}
<div id="theme1">
  Theme 1
</div>
<div id="theme2">
  Theme 2
</div>

希望对您有所帮助! :)

关于css - 根据 body ID 声明 less 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44793608/

相关文章:

css - 如何设置 Eclipse JS 以将文件编辑为 CSS

css - 更少的格式

CSS Less-无法在 bootstrap.css 中找到类

css - 在 LESS CSS 中生成随机数?

php - HTML 表单被阻止,无法输入任何文本

javascript - 对 n 列平均使用剩余空间

javascript - 如何将基于输入键的事件分配给 <ul> 中选定的 <li> 元素

:after element 中的 CSS 背景图片

python - 使用 python 在一个 html 页面中显示拆分数据框的 HTML 代码

css - 如何使用 LESS 更有效地使用媒体查询?