Less – 变量

定义和使用变量

在CSS中经常可以看到多次重复的相同值,在Less中通过使用变量避免相同值的重复。变量使代码的维护更加容易,修改值,只需在变量定义的地方一处修改就可以。

变量使用@符号定义,使用冒号:赋值。变量定义好后就可以在各处使用。

示例:

@color1: #ca428b;

.div1 {
   background-color : @color1;
}

.div2 {
   background-color : @color1;
}

变量插值

除了属性值,变量还可以在其他地方使用,比如选择器名称、属性名称、url和@import语句。在这些地方中引用变量,变量名必须放在以@符号为前缀的大括号({})中,例如:@{color1}

选择器名称中使用变量

选择器名称可以引用任何变量。

less 代码:

@selector: h2;

@{selector} {
   background: #2ECCFA;
}

css 输出:

h2 {
   background: #2ECCFA;
}

url中使用变量

变量可用于存储url。

less 代码:

@images: "https://www.qikegu.com";

.myclass {
   background : url("@{images}/less/images/less_variables/birds.jpg");
   width:800px;
   height:500px;
}

编译后 css输出:

.myclass {
   background: url("https://www.qikegu.com/less/images/less_variables/birds.jpg");
   width: 800px;
   height: 500px;
}

@import语句中使用变量

@import语句中可以用变量来保存路径,这在引用公共父目录时非常有用。

less 代码:

@path : "https://www.qikegu.com/less";
@import "@{path}/external.less";
.myclass {
   color : #A52A2A;
}

external.less的内容:

.myclass {
   background: #C0C0C0;
}

编译后的css输出:

body {
   background: #C0C0C0;
}

p {
   color: #A52A2A;
}

属性名中使用变量

在属性名中可以引用变量。

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

编译后css输出:

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

变量名中引用变量

可以在变量名中引用变量。

less代码:

.myclass {
   @col: #ca428b;
   @color: "col";
   background-color: @@color;
}

编译后css输出:

myclass {
   background-color: #ca428b;
}

懒加载

懒加载允许,变量使用在前,变量声明在后。

less 代码:

p {
   font-size: @a;
   color: #ca428b;
}
@a: @b;
@b: 25px;

编译后css输出:

p {
   font-size: 25px;
   color: #ca428b;
}

覆盖变量值

多次定义变量值,后面的会覆盖前面的,本地的会覆盖上一级范围的。

less代码:

@color:#800080;

@color: #DDD;

h3 {   
    color: @color;  
}

编译后css输出:

h3 {
  color: #DDD;
}

变量作用域

变量作用域指定变量可用范围。编译时,编译器先从本地范围查找变量定义,如果没找到,编译器将到上一级范围查找,以此类推。

通常一个大括号内定义的变量是局部变量,作用域局限于大括号内。

less 代码:

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

编译后 css 输出:

.myclass {
   font-size: 20px;
   color: green;
}


浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载