Less知识点记录（包含HBuilderx保存自动编译Less设置方法）

一、HBuildex编译设置（已配置node与Less插件）

本人使用的是HbuilderX编译,可以实现保存自动编译，在配置文件设置key:"ctrl+s"和onDidSaveExecution:"true"

这里是手动编译
在这里插入图片描述

二、代码学习模块

使用的是css的模板(不支持less)，所以有些地方会有些颜色不对应


// //******************************************************************************************
//在main文件中引入@import"style.less"，可以不加后缀，如果不想让less对css进行处理，可以@import"style.css"

// 命名空间，为了更好的进行封装，将变量或者混合打包起来，这样就比较清楚是比如#header下面的就统一放在#l-bundle下面
#l-bundle{
	.l-button{
		display: block;
	}
	.l-tab{display: block;}
}
//调用的方法如下
#header .ifdiv{
	#l-bundle > .l-button;
}

// //******************************************************************************************

@border-color: #00C1DE;

@bgcolor: #ddd;

// 定义通用集,不代参数的
//可以不写括号
.l-border(){
	border-top: 1px solid #00c1de;
	border-bottom: 1px solid #00c1de;
}
//带混合参数的
.l-border-radius(@radius:10px){
	border-radius: @radius;
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
}

//有多个参数的
.l-box-shadow(@x: 0,@y: 0,@blur: 20px,@color: #ddd){
	box-shadow: @arguments;
	-webkit-box-shadow: @arguments;
	-moz-box-shadow: @arguments;
}

#header{
	width: 200px;
	margin: 20px auto;
	height: 200px;
	padding: 10px;
	background-color: @bgcolor;
	border: 1px solid @border-color;
	.l-border;//应用属性集
	.l-border-radius; 
	.l-border-radius(30px);//调用时候可以自己加参数
	.l-box-shadow(1px,2px);//可以只写部分参数
}

// //******************************************************************************************

//匹配模式，想根据传入的参数来改变相应的呈现方式
.l-mixin(dark, @color){
	color: darken(@color,10%);//darken是Less自带的函数用以计算颜色的深度
}

.l-mixin(light, @color){
	color: lighten(@color,10%);//lighten计算颜色的浅度
}
.l-mixin(@_, @color){ //@_接受任意值
	display: clock;
}
//进行运行
@switch: light;

.class{
	.l-mixin(@switch, #888);//调用了light
}

//也可以实现类的重载
.l-chongzai(@a){
	color:@a;
}

//第一个
.l-chongzai(@a,@b){
	color:@a;
	border:1px solid @b; 
}

div{
	.l-chongzai(#ddd, #eee);//传入了2个参数，所以调用的是第二个l-mixin
}

// //******************************************************************************************
//(模式匹配和导引表达式)当想根据表达式进行匹配而不是参数的个数，通过引导混合来实现if/else的功能

.l-if-mixin(@a) when (lightness(@a) >= 50% ){ //判断明亮度
	background-color: black;
}


.l-if-mixin(@a) when (lightness(@a) < 50% ){ //判断明亮度
	background-color: #999;
}

.l-if-mixin(@a) when(@a=true),(lightness(@a) < 50% ){ //"," 是分隔符类似"||"，条件满足1个就可以了,not就是"!",and就是"&&"
	background-color: #333;
}

.l-if-mixin(@a,@b) when (@a<@b ){ //进行比较
	//需要的操作
}

.ifdiv{
	.l-if-mixin(#00c1de);//进行了判断选择了第二个，因为亮度大于50了
}
//基于值的类型进行匹配
.l-if-mixin(@a) when (iscolor(@a)){
	//用js进行颜色判断
	//常用的检测函数
	//iscolor
	//isnumber
	//isstring
	//iskeyword
	//isurl
	//判断是像素：ispixel
	//判断是单位量：ispercentage
	//判断是em：isem
}

// //******************************************************************************************
//less用嵌套的方式编写层叠样式
// #header .ifdiv{ /这里是内容 }
//less的写法↓

#header{
	color: #00C1DE;//#header这个层级的样式
	.ifdiv{
		font-size: 1.25rem;//. ifdiv这个层级的
		&:hover{//ifdiv的伪类样式
			font-size: 1.3125rem;
		}
	}
}

//写串联选择器，而不是后代选择器比如#header .fidiv.fidiv2{}
#header{
	.fidiv{
		.ifdiv2{
			margin: 0 auto;
		}
	}
}

// //******************************************************************************************
// less的运算
@base: 2px;
@fillter: @base * 2;
@other:@base + @fillter;

//可以进行复合运算
//2px+2会输出6px;
.ifdiv{
	border: (@base * 2) solid @bgcolor;
}

// //******************************************************************************************
//Less提供color函数,会先转换成HSL色彩空间，然后在通道级别操作
@color: #00c1de;
.dsad(){
	lighten(@color,10%);//返回亮10%
	darken(@color,10%);//返回暗10%
	
	saturate(@color,10%); //饱和度增减10%
	desaturate(@color,10%);//饱和度减少10%
	
	fadein(@color, 10%);//透明度减少10%
	fadeout(@color,10%);//透明度增加10%
	fade(@color, 50%);//设置透明度50%
	
	spin(@color, 10);//返回颜色比@color大10度的颜色
	spin(@color, -10);//返回@color小10度颜色
	
	mix(@color1,@color2);//返回color1 和color2的混合
	
	//在一个颜色的通道上创建另外颜色
	@new: hsl(hue(@old), 45%, 90%);
}



// //******************************************************************************************
//数学函数，提供数学运算

.math(@a){
	round(1.67);//2
	ceil(2.4);//3
	floor(2.6);//2
	percentage(0.5)//换成百分比
}
// //******************************************************************************************
//作用域会从本地先查找，然后再到父级去知道找到.Less为止
@l-color: red;
#page{
	@l-color: #ddd;
	#header{
		@l-color:blur;
		color: @l-color;//最后选择的是最近的blur;
	}
}

// //******************************************************************************************
//插值替换
@l-base-url: "http://www.xxxx.com";

.header{
	background-image: url("@{l-base-url}/images/xx/index-logo.png");//和JSP一样的替换
}

// //******************************************************************************************
//避免编译
.class{
	filter: ~"ms:alwsssssssssssssss";//就不会去编译，原原本本的输出
}
// //******************************************************************************************
//JS的表达式
// @var: `"hello".toUpperCase()+'!'`;