Less的使用

Less编译后才能被浏览器识别。

注释

//不会在编译后的css中显示
/*会在编译后的css显示*/

设置公共文件public.less

每个文件引入 @import ‘./public.less’;

公共文件中可设置

公共变量

@red: #ff4609;

公共方法

/* public.less */
.kkk(@num: 100){    /* 默认值100 */
  height: 1rem * @num / 100;
}
/* a.less 中引用该方法 */
#a{
    .kkk(60);   /* height: 0.6rem; */
}

/* public.less */
/* 根据传入参数不同调用不同方法(两个方法同名) */
.a(t1, @k: 100px){
    width: @k;
}
.a(t2, @k: 200px){
    width: @k;
}
/* a.less 中引用该方法 */
#a{
    .a(t1);   /*  100px; */
}

变量

//普通变量
@blue: #5B83AD;
#a{
	color: @blue;
}

//作为选择器和属性名
@kd: width;
.@{kd}{
	@{kd}: 100px;
}

//作为url
@myUrl:"a/b/c";
body{ background: url(“@{myUrl}/d.png”) }

//变量是延迟加载的，使用前不需预先声明
.a{ width: @w; }
@w: @a;
@a: 10px;

//存在同名变量时，会在当前作用域向上搜索，使用最后定义的值
@a: 0;
.class{
	@a: 1;
	.brass{
		@a: 2;
		three: @a;
		@a: 3;
    }
    one: @a;
}
//编译后
.class{ one:1; }
.class .brass{ three:3; }

混合

//普通混合
.a{
	border: 1px solid red;
	color: black;
}
#sa{
	.a;
	font-size: 19px;
}

//不带输出的混合，不希望混合集输出到样式，加括号，编译后.a()消失
.a(){ … }
#sa{ .a(); }

//带选择器的混合
.a(){
	&:hover{ … }	//&代表父级
}
#sa{ .a(); }	//#sa:hover{ … };

//带参数的混合，没有默认参数又不传参不合法
.a(@red){ color: @red; }	//括号内可写@red:#ff0011表示默认值，若没传参数使用
#sa{ .a(#ff0000); }
//多参数
.a(@a1; @a2:2; @a3:3){
	color: @a1;
	margin: @a2;
	padding: @a3;
}
#sa{ .a(1,2,3;x,y); }	//@a1:1,2,3;@a2:x,y;@a3:3;
#sa{ .a(1,2,3); }	//@a1:1;@a2:2;@a3:3;
#sa{ .a(1,2,3;); }	//@a1:1,2,3;@a2:2;@a3:3;
//如果只有“，”，以此分隔，如果有“；”，以“；”分隔。

//多个同名混合
.a(@a1){
	color-1: @a1;
}
.a(@a1;@a2:2){
	color-2: @a1;
	margin-2: @a2;
}
.a(@a1;@a2;@a3:3){
	color-3: @a1;
	margin-3: @a2;
	padding-3: @a2;
}
#sa{ .a(1); }
//编译
#sa{
	color-1: 1;
    color-2: 1;
	margin-2: 2;
}
//最后一个.a因为只传了一个参数，非法

//命名参数
//混合引用时靠参数名而非位置传参
.a(@color;@margin){ … }
#sa{ .a{@margin:5px;@color:red}; }

//@arguments变量
//代表所有可变参数，参数先后顺序是括号内参数的先后顺序
//赋值时若想给第1和第3个值赋值，不能写（1,,3） 大专栏  Less的使用，要把默认值写上。
.a(@x:solid;@y:red){
	border: 1px @arguments;
}

//匹配模式
.a(all, @w:5px){ … }
.a(all-2, @w:15px){ … }
#sa{ .a(all-2,10px); }	//使用all-2那个，@w变成10px

//得到混合中变量的返回值
.a(@x, @y){
	@ag: ((@x+@y)/2);
}
#sa{
	.ag(16px,15px);
	margin: @ag;
}

运算

任何数组、颜色和变量都可以运算。

只需保证一个数值有单位即可：5px + 5 (10px)

运算符和值之间必须以空格分开

运算颜色时先转为rgb模式，再转为16进制的颜色返回

#000000 + 21 //#151515 //rgb 00 00 00 → rgb 21 21 21

rgb取值范围0-255，超过默认使用255

函数

rbg(0,133,0) //#008500

//rbg函数，将rbg模式转为16进制

less里有很多函数，详情看函数库

嵌套

.a{
	…
	.b{ … }
}
&:当前选择器的父选择器
ul{
	li{
		&:hover{ … }	//ul li:hover
    }
}

/* 若把&放在当前选择器中，则当前选择器会插入所有父选择器之前 */
ul{
	li{
		.a &{ … }	//.a ul li
    }
}
/* 组合使用生成所有可能的选择器列表 */
p, a, span{
	& &{ … }
}
p p,p a,p span,a a,a p,a span,span a,span p,span span{ … }

命名空间

#sa(){
	.a{
		color: #000;
		&:hover{ color: #fff; }
		.b{ background:#ff0000; }
    }
}
.sa1{
	#sa > .a;	//相当于把.a部分搬过来，大于符号可省略
}
.sa2{
	#sa > .a > .b;	//相当于把.b搬过来，大于符号可省略
}
//编译后
.sa1{ color: #000; }
.sa1:hover{ color:#fff; }
.sa1 .b{ background:#ff0000; }
.sa2{ background:#ff0000; }

作用域

在局部查找变量和混合，若没有，则去父作用域查找。

@a: 1;
.a{
	.b{
		font-size: @a;	//2
    }
    @a: 2;
}

引入

@import “main”; //引入main.less文件

也可引入css文件，但不能混合到项目中，编译后引入css的import保持原状

@import “index.css”	//.color{ color:#fff; }
@wp: 10px;
.a{
	width: @wp;
	.color;	//错误，不能混用
}

参数

@import (reference) “main”;

• once 默认，只包含一次

• reference 使用less文件（比如其中的变量，混合等），但编译时不输出引入less的内容

比如引入的main.less中的有.a{color:red;}，编译后不输出

• inline 编译后输出原文件但不加工，引用文件不能使用被引用文件的变量等，否则报错

• less 无论文件扩展名是什么，作为less文件对象

• css 无论文件扩展名是什么，作为css文件对象

• multiple 允许引入多次相同文件名的文件

关键字

调用混合集后面加!important关键字，可以使混合集里所有属性都继承!important

条件表达式

//带条件的混合
.a(@a) when (@a > 10){
	color: red;
}
.a(@a) when (@a <= 10){
	color: green;
}
.a(@a){ x:@a; }
#sa{ .a(3) }
//编译后
#sa{
	color: green;
	x: 3;
}

类型检查函数

.a(@a) when(isnumber(@b)){…}

基于类型匹配

• iscolor

• isnumber

• isstring

• iskeyword

• isurl

单位检查函数

• ispixel

• ispercentage

• isem

• isunit

循环

.a(@c)when(@c > 0){
	.a((@c - 1));
	width:(10px * @c);
}
div{ .a(3); }
//编译后
div{
	width:10px;
	width:20px;
	width:30px;
}

合并属性

.a(){
	margin+: 1px;
}
.myclass{
	.a();
	margin+: 10px;
}
//编译后
.myclass{
	margin:1px, 10px;
}
// +:以逗号分隔属性值
// +_:以空格分隔属性值