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/