Less进阶使用

继承

extend 关键字的使用

extend 是 Less 的一个伪类。它可继承所匹配声明中的全部样式。

/* Less */
.animation{
	transition: all .3s ease-out;
	.hide{
		transform:scale(0);
	}
}

#main{
	&:extend(.animation);
}

#con{
	&:extend(.animation .hide);
}

/* 生成后的 CSS */
.animation,#main{
	transition: all .3s ease-out;
}

.animation .hide , #con{
	transform:scale(0);
}

all 全局搜索替换

使用选择器匹配到的全部声明。

/* Less */
#main{
	width: 200px;
}
#main {
	&:after {
		content:"Less is good!";
	}
}

#wrap:extend(#main all) {}

/* 生成的 CSS */
#main,#wrap{
	width: 200px;
}
#main:after, #wrap:after {
	content: "Less is good!";
}

减少代码的重复性

从表面 看来，extend 与 方法 最大的差别，就是 extend 是同个选择器共用同一个声明，而 方法 是使用自己的声明，这无疑 增加了代码的重复性。

方法示例 与上面的 extend 进行对比：

/* Less */
.Method{
	width: 200px;
	&:after {
		content:"Less is good!";
	}
}

#main{
	.Method;
}

#wrap{
	.Method;
}

/* 生成的 CSS */
#main{
	width: 200px;
	&:after{
		content:"Less is good!";
	}
}

#wrap{
	width: 200px;
	&:after{
		content:"Less is good!";
	}
}

继承使用要点

1. 选择器和扩展之间 是允许有空格的：pre:hover :extend(div pre)。
2. 可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) - 注意这与 pre:hover:extend(divpre, .bucket tr)一样。
3. 这是不可以的，扩展必须在最后 : pre:hover:extend(div pre).nth-child(odd)。
4. 如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字。

导入

文件导入

导入 less 文件 可省略后缀。

import "main";
//等价于
import "main.less";

@import 的位置可随意放置

#main{
	font-size:15px;
}
@import "style";

reference

Less 中 最强大的特性 使用 引入的 Less 文件，但不会编译它。

/* Less */
@import (reference) "bootstrap.less";

once

@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。

@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored

multiple

使用@import (multiple)允许导入多个同名文件。

/* Less */
// file: foo.less
.a {
	color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
/* 生成后的 CSS */
.a {
	color: green;
}
.a {
	color: green;
}

条件表达式

带条件的混合

• 比较运算符：>, >=, =, =<, <
• 格式：when() { }

// lightness() 是检测亮度的函数，用%度量
.mixin(@a) when(lightness(@a) >= 50% ) {
	background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
	background-color: white;
}
.mixin(@a) {
	color: @a;
}
.class1 {
	.mixin(#ddd);
}
.class2 {
	.mixin(#555);
}
//编译输出
.class1 {
	background-color: black;
	color: #dddddd;
}
.class2 {
	background-color: white;
	color: #555555;
}

类型检测函数

• 检测值的类型
• iscolor
• isnumber
• isstring
• iskeyword
• isurl

.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
	color: @a;
	font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
	font-size: @a;
	color: @b;
}

单位检测函数

• 检测一个值除了数字是否是一个特定的单位
• ispixel
• ispercentage
• isem
• isunit

mixin(@a) when(ispixel(@a)) {
	width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
	width: @a;
}
.class1 {
	.mixin(960px);
}
.class2 {
	.mixin(95%);
}
//编译输出
.class1 {
	width: 960px;
}
.class2 {
	width: 95%;
}

函数

函数库

• less中封装了非常多函数库，例如颜色定义、颜色操作、颜色混合、字符串处理等等。
• 例如color()：用于解析颜色，将代表颜色的字符串转换为颜色值。

body {
	color: color("#f60");
	background: color("red");
}
//编译输出
body {
	color: #ff6600;
	background: #ff0000;
}

• 例如convert()：将数字从一种类型（单位）转换为另一种类型
• 长度单位：m, cm, mm, in, pt, px, pc
• 时间单位：s, ms
• 角度单位：rad(弧度), deg(度), grad(梯度), tum(圆)

body {
	width: convert(20cm, px);
}
//编译输出
body {
	width: 755.90551181px;
}

更多函数前往官网查看！https://less.bootcss.com/