less学习笔记

less

less是css代码的一种预处理器，css预处理器还有 sass，stylus
less是一门css的一种预处理语言，它扩展了css语言的，增加了变量，Mixin、函数等特性，它使css更易维护和扩展
less 是跑在node平台上的

在vscode上使用easy-less

• 下载安装插件
• 在扩展设置中选择 settings.json
• 配置：

"less.compile": {
        
        "compress": false,
        "sourceMap": false,
        "out": true,
        "outExt": ".css"
    }

less注释

// :
在less中 //是不解析到css文件中去的
// :
在less中 //是可以解析到css文件中去的

less中变量

• 定义变量在一般在less文件的开头书写，
  使用@符号开始，例如：

• 变量是属性值：
  @color:pink;
  使用：
  blackgroundcolor:@color; //这里背景显示为pink色

• 变量是属性
  @w:width;
  使用：
  @{w}:100px; //这里的宽度显示为100px

• 变量是选择器
  @selector:#box;
  使用：
  @{selector}{
  width:100px;
  height:100px;
  }

• 变量的延迟加载
  在less中变量会等这一个模块加载完全之后去找变量的值

	@var: 0;
	.class{
		@var: 1;
		.brass{
			@var: 2;
			three: @var;     //3
			@var: 3;
		}
		one: @var;      // 1
	}

less中的嵌套规则

• 1、基本嵌套规则
• 2、&使用：
  当嵌套在里面时，可以使用 & 来提升选择器的层级关系

	.div{
		.class{
		width:100px;
		height:100px;
		&:hover{
			blackgroundcolor:yellow;
		}
	}
	}

可以得到

	.div .class{
		width:100px;
		height:100px;
	}
	.div .class:hover{
		width:100px;
		height:100px;
		bgc:yellow;
	}

less中的混合

混合就是将一系列属性从一个规则引入到另一个规则集的方式
1、普通混合

	.test{
		width:100px;
		height:100px;
		bgc:yellow;
		font-size:20px;
		font-wiegth:400;
	}

	.class{
		width:500px;
		height:500px;
		.div1{
			.test
		}
		.div2{
			.test
		}
	}

2、不带输出的混合模式

	.test(){
		width:100px;
		height:100px;
		bgc:yellow;
		font-size:20px;
		font-wiegth:400;
	}

	.class{
		width:500px;
		height:500px;
		.div1{
			.test();
		}
		.div2{
			.test();
		}
	}

3、带参数的混合

	.test(@w,@h,@b,@fz){
		width:@w;
		height:@h;
		bgc:@b;
		font-size:@fz;
		font-wiegth:400;
	}

	.class{
		width:500px;
		height:500px;
		.div1{
			.test(100px,100px,yellow,24px);
		}
		.div2{
			.test(90px,30px,red,30px);
		}
	}

4、含有默认参数的混合

	.test(@w,@h,@b,@fz:24px){
		width:@w;
		height:@h;
		bgc:@b;
		font-size:@fz;
		font-wiegth:400;
	}

	.class{
		width:500px;
		height:500px;
		.div1{
			.test(100px,100px,yellow);
		}
		.div2{
			.test(90px,30px,red,30px);
		}
	}

5、命名参数

	.test(@w,@h,@b:yellow,@fz:24px){
		width:@w;
		height:@h;
		bgc:@b;
		font-size:@fz;
		font-wiegth:400;
	}

	.class{
		width:500px;
		height:500px;
		.div1{
			.test(100px,100px,yellow);
		}
		.div2{
			.test(90px,30px,@fz:40px);
		}
	}

6、匹配模式

// 第一个参数是匹配符
	.test(R,@w,@h,@b:yellow,@fz:24px){
		width:@w;
		height:@h;
		bgc:@b;
		font-size:@fz;
		font-wiegth:400;
		float:right;
	}
	.test(L,@w,@h,@b:yellow,@fz:24px){
		width:@w;
		height:@h;
		bgc:@b;
		font-size:@fz;
		font-wiegth:400;
		float:left;
	}
	.class{
		width:500px;
		height:500px;
		.div1{
			.test(R,100px,100px,yellow);
		}
		.div2{
			.test(L,90px,30px,@fz:40px);
		}
	}

7、同名混合

//
	.test(@_,@w,@h,@b){
		width:@w;
		height:@h;
		bgc:@b;
		font-size:@fz;
		font-wiegth:400;
	}
	.test(R,@w,@h,@b:yellow,@fz:24px){
		float:right;
	}
	.test(L,@w,@h,@b:yellow,@fz:24px){
		float:left;
	}
	.class{
		width:500px;
		height:500px;
		.div1{
			.test(R,100px,100px,yellow);
		}
		.div2{
			.test(L,90px,30px,@fz:40px);
		}
	}

8、argument

	.border(@1,@2,@3){
		border:@argument;
	}
	.class{
		.border(1px,solid,black)
	}

less运算

	.class{
		width:(100 + 100px);    //widht=200px 
	}

less 继承属性

.middle{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}


#box1{
    &:extend(.middle);
    width: 500px;
    height: 500px;
    background:#eee;
    #box2{
        &:extend(.middle);
        width: 300px;
        height: 300px;
        background-color: skyblue;
        #box3{
            &:extend(.middle);
            width:100px;
            height: 100px;
            background: red;
        }
    }
}

得到

.middle,
#box1,
#box1 #box2,
#box1 #box2 #box3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
#box1 {
  width: 500px;
  height: 500px;
  background: #eee;
}
#box1 #box2 {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}
#box1 #box2 #box3 {
  width: 100px;
  height: 100px;
  background: red;
}

less 防止编译

~"内容"

	width:~"calc(100px + 100)"