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;
}

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

你可能感兴趣的:(Less,javascript,css,less)