🟡Less学习

本文最后更新于:2022年4月8日 晚上

注释

1
2
// 行注释,编译去除
/* 块注释,编译保留 */

变量

使用@命名变量

1
@key: value;

也可命名选择器

1
2
3
4
5
@selsetor: className>p

.@{selector}{
// 即`.className>p{}`
}

作用域

作用域同JavaScript

同作用域变量申明先后与使用无关

运算

可以对数字,颜色,变量进行 +-*/运算

绝对单位运算时进行单位转换,结果单位为最左的第一个单位

结果为相对单位运算时只将数字进行运算,结果单位为最左的第一个单位

有颜色时运算结果为颜色

1
2
3
4
5
6
7
8
9
10
11
12
@a: #012;

div {
color: @a + 2vw; // #021324;
color: @a - 2px; // #000f20;
color: @a * 2%; // #000f20;
color: @a / 2cm; // #000f20;
width: 2px - @a; // #000f20;
width: 2px - 1vw; // 1px;
width: 1vw + 12px + 1cm; // 14vw;
width: 1px + 12vw + 1cm; // 50.79527559px;
}

混合

#key().key()可复用样式

1
2
3
4
5
6
7
8
9
10
11
12
.banner {
width: 100%;
}

#bar {
height: 355px;
}

.mixins{
.banner();
#bar();
}

嵌套

&表示父选择器(效果类似宏展开)

外层可读取内层样式

内层样式不会覆盖外层样式

less:

1
2
3
4
5
6
7
8
9
div {
color: #fff;
&>p {
color:#000;
a {
color: #123;
}
}
}

css:

1
2
3
4
5
6
7
8
9
div {
color: #fff;
}
div > p {
color: #000;
}
div > p a {
color: #123;
}

映射

()创造一个map,编译后不保留

1
2
3
4
5
6
7
8
#colors() {
color1: #f2f3f5;
color2: #231;
}

div {
background: #colors[color1];
}

命名空间与访问符

()创造一个样式集,编译后不保留

less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#bundle() {
.button {
color: #000;
&:hover {
color: #111;
}
}
.tab {
color: #222;
}
.citation {
color: #333;
}
}

#header a {
#bundle.button(); // 还可以书写为 #bundle > .button 形式
#bundle.tab();
}

css:

1
2
3
4
5
6
7
#header a {
color: #000;
color: #222;
}
#header a:hover {
color: #111;
}

@media规则

向上冒泡合并选择器(内含)与@media(and合并)

向下内含样式但忽略其他@media中的样式

less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.component {
color: #000;
@media (min-width: 1280px) {
color: #111;
&>p{
@media (min-width: 768px) {
color: #222;
div {
color: #333;
}
&>a {
@media (min-resolution: 192dpi) {
color: #555;
}
color: #444;
}
}
}
}
}

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.component {
color: #000;
}
@media (min-width: 1280px) {
.component {
color: #111;
}
}
@media (min-width: 1280px) and (min-width: 768px) {
.component > p {
color: #222;
}
.component > p div {
color: #333;
}
.component > p > a {
color: #444;
}
}
@media (min-width: 1280px) and (min-width: 768px) and (min-resolution: 192dpi) {
.component > p > a {
color: #555;
}
}

导入

1
2
@import "less-style";     // 引入less样式表可不加拓展名
@import "css-style.css";

🟡Less学习
https://qingshaner.com/less学习/
作者
清山
发布于
2022年1月26日
许可协议