🟡Less学习

本文最后更新于：2024年4月25日 上午

注释

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";
CSS > CSS预处理 > Less
#Less #css预处理
🟡Less学习
https://qingshaner.com/less学习/
作者
清山
发布于
2022年1月26日
许可协议