Less简明教程
2.1.2 变量插值
阅读(

Less 基础

Less 特性

变量

普通变量

变量插值

不仅可以直接在属性值中使用变量,还可以用类似 @{name} 的结构,以“插值”的方式在选择器名、属性名、URL、import、媒体查询中使用变量。在编译时,变量将被替换为它们相应的值。

1)选择器名插值

Less选择器名称中可以引用任何变量。如:

@head: h;
.@{head}2 {
  font-size: 16px;
}

编译后的CSS代码为:

.h2 {
  font-size: 16px;
}

2)属性名插值

Less属性名称中可以引用任何变量。如:

@my-property: color;
.myclass {
  background-@{my-property}: #81F7D8;
}

编译后的CSS代码为:

.myclass {
  background-color: #81F7D8;
}

3)URL插值

变量还可以用来保存URL,并在 url() 中使用它。如:

@host: "http://www.waibo.wang/";
h2 {
  color: @color;
  background: url("@{host}img/bg.png");
}

编译后的CSS代码为:

h2 {
  color: #f00;
  background: url("http://www.waibo.wang/img/bg.png");
}

4)import插值

import语句中,可以使用保存路径的变量。如:

@host: "http://www.waibo.wang/";
@import "@{host}/reset.less";

5)媒体查询插值

如果你希望在media query中使用Less变量,你可以直接使用普通的变量方式。因为“~”后面的值是不被编译的,所以可以用作media query的参数。如:

@singleQuery: ~"(max-width: 480px)";
@media screen, @singleQuery { 
    div { 
    width:2000px; 
    } 
} 

编译后的CSS代码为:

@media screen, (max-width: 480px) {
  div {
    width: 2000px;
  }
} 

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验