您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用LESS CSS定义变量变量

使用LESS CSS定义变量变量

在选择器和参数混合中使用插值和转义,括号可获得所需的效果

动态变量** 由内插:在一个串,"@{variable}"将被替换为变量的值。它们也可以嵌套:给定@{@{var}-foo}@var: bar;,结果为"barfoo"。 结果值被引用。要删除这些引号,请添加前缀~

通过选择器插值[器:body.@{var}变成body.bar

例:

@red-md:   #232;
@red-dk:   #343;

.setColor(@color) {
    body.@{color} { background-color: ~"@{@{color}-dk}";
        #container { background-color: ~"@{@{color}-md}";
         p { color: ~"@{@{color}-md}"; }
      }
    }
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..

变成:

body.red {
  background-color: #334433;
}
body.red #container {
  background-color: #223322;
}
body.red #container p {
  color: #223322;
}

注意:最初编写答案时,选择器插值不存在。如果您正在使用旧的LESS编译器(在LESS 1.3.1a之前),请参阅上一版本的解决方案。在LESS1.4.0中将不再支持方法

CSS 2022/1/1 18:24:26 有342人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶