Less中的变量

原生的css没有变量，但是less有

一、变量分为两类

普通的：

定义: @变量名:变量值

使用: 属性:@变量名

例子：

Less文件

@width:5000px;
@height:300px;
@font_size:12px;

.textarea {
	width:@width;
	height:@height;
	font-size:@font_size;
}

css文件

.textarea {
  width: 5000px;
  height: 300px;
  font-size: 12px;
}

 

 作为选择器和属性名的变量

定义: @变量名:变量值

使用: 属性:@{变量名}

例子：

Less文件

@width:5000px;
@height:300px;
@font_size:12px;
@name:.text;
@b_c:border-color;
.textarea {
	width:@width;
	height:@height;
	font-size:@font_size;
}
@{name} {
    @{b_c}: aqua;
}

css文件

.textarea {
  width: 5000px;
  height: 300px;
  font-size: 12px;
}
.text {
  border-color: aqua;
}

二、变量的两个特点

1.延迟加载

变量可以先使用再定义

 例子：

Less文件

@height:300px;
@font_size:12px;
.textarea {
	width:@width;
	height:@height;
	font-size:@font_size;
}
@width:5000px;

css文件

.textarea {
  width: 5000px;
  height: 300px;
  font-size: 12px;
}

2.优先加载变量（同一个作用域中），让后再加载样式

同一变量名称定义多次时，只会使用最后一次定义的变量。

定义变量优先级：引用变量所在{} > 引用变量所在父节点{}，不会受到子节点的影响

 例子：

Less文件

@width:5000px;
.textarea {
	@width:300px;
	.text {
        @width:100px;
        width: @width;
        @width:200px;
    }
    .text2 {
        width: @width;
    }
    width: @width;
}
.textarea2 {
    width: @width;
}

css文件

.textarea {
  width: 300px;
}
.textarea .text {
  width: 200px;
}
.textarea .text2 {
  width: 300px;
}
.textarea2 {
  width: 5000px;
}

可见变量不会受子目录影响，但会受到父节点的影响