Less语法整理01

闲下来想了解，索性记录一下

变量@

1.样式变量

@color： #000	// 定义
color：@color	// 使用

2. 样式名变量

@my-name：color;
.ad{
	background-@{my-name}:#000;
}

3.选择器变量

@banner： portal-banner；
.@{banner}{
	width:100%;
}

4.变量拼接

@base-url：”/images/”
.ad{
	background-image:url(“@{base-url}ad.jpg”);
}

父选择器&

a{
	color:333;
	&:hover{};				// 输出：a:hover{}
	&-button{};				// 输出： .a-button{}
	&:hover, &-button{};	// 输出：a:hover,a-button{}
	&+ &-button{};			// 输出：a + a-button{}; 与a同级相邻的a-button
	span &{};				// 输出：span a{}
}

嵌套

.content{
	margin-top: .24rem;
ul.new-list{
	box-shadow: 0 0 10px rgba(0,0,0,.1)
	li{
	font-size:.14rem;
	}
}
}

继承extend

.master-color{
color:#000;
}
.title{
&:extend(.master-color);
}

合并属性+ +_

1.+合并后用逗号分隔

.box-merge(){
	box-shadow+: inset 0 0 10px #555;
}
.box{
	box-shadow+: inset 1px 1px 20px #333;
}
// 输出
.box{
	.box-merge();
	box-show+: inset 0 0 10px #555, inset 1px 1px 20px #333;
}

2.+_合并后用空格隔开

.box-merge(){
	transform+_:scale(2)
}
.box{
	.box-merge();
	trasnform+_:rotate(15deg);
}
// 输出
.box{
	transform: scale(2) rotate(15deg);
}

混合

1.带小括号

// 定义
// 括号中，冒号左侧为参数名，冒号右侧为参数默认值
.f(@f1:left,@w:200px;@h:300px){
	float:@f1;
	width:@w;
	height:@h;
}
// 使用
.left{
	.f();
}
.right{
	.f(right;300px;400px);
}
// 优先使用这个混淆
.left{
.f() !important;
}

2.>只使用混合中的部分选择器

.master-mix(){
	.sub{
	font-size: .12rem;
	}
}
.sub-title{
	// 以下三种写法
	.master .sub();
	.master-mix.sub();
	.master-mix > .sub();
}

3.@arguments输出所有参数

.bs(@x:0,@y:0;@blur:1px;@color:#000){
	box-shadow:@arguments;
}
.box{
	.bx(10px);
}
// 输出
.box{
	box-shadow:10px 0 1px #000;
}

@sizes:{
	content:8rem;
	Sub:2rem;
}
.subnav{
	@media (min-width:@sizes[sub]){
		display:block;
	}
}