文章目录
继承
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!";
}
}
继承使用要点
- 选择器和扩展之间 是允许有空格的：pre:hover :extend(div pre)。
- 可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) – 注意这与 pre:hover:extend(divpre, .bucket tr)一样。
- 这是不可以的，扩展必须在最后 : pre:hover:extend(div pre).nth-child(odd)。
- 如果一个规则集包含多个选择器，所有选择器都可以使用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/
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/121979.html
