抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

Less

2k 字

8 分钟

次

条

摘要：本文主要介绍了Less的使用。

1 简介

1.1 预处理器

在了解Less之前，要先认识什么是CSS预处理器以及其有什么作用。

增强传统CSS（层叠样式表）功能的脚本语言被称为CSS预处理器，它允许开发人员使用变量、嵌套、混合等功能，以更高效和可维护的方式编写CSS代码。CSS预处理器的另一个术语是动态样式表语言。

1.2 常见的预处理器

1.2.1 Less

Less是一种动态样式语言，它扩展了CSS的功能，提供了变量、嵌套、混合、运算等功能。

Less使用类似于CSS的语法，但具有更简洁的书写方式。

Less可以通过Less编译器将Less文件编译为普通的CSS文件。

Less具有较小的学习曲线，易于上手。

官网：https://less.bootcss.com/

1.2.2 Sass

Sass是一种成熟且广泛使用的CSS预处理器，它提供了许多强大的功能，如变量、嵌套规则、混合、继承等。

Sass有两种语法：Sass（使用缩进）和 Scss（使用类似于CSS的语法）。

Sass可以通过命令行工具或构建工具编译为普通的CSS文件。

Sass具有强大的功能和灵活性，适用于大型项目。

官网：https://sass.bootcss.com/index.html

1.2.3 Scss

Scss是Sass的一种语法格式，它使用类似于CSS的语法，但具有Sass的功能和特性。

Scss可以看作是Sass的一种扩展，使用大括号和分号来表示代码块和语句。Scss与Sass兼容，可以在一个项目中同时使用。

官网：https://sass.bootcss.com/index.html

1.2.4 Stylus

Stylus是一种简洁灵活的CSS预处理器，提供了类似于Sass和Less的功能，如变量、嵌套规则、混合、继承等。

Stylus使用类似于Python的缩进语法。

Stylus也可以通过命令行工具或构建工具编译为普通的CSS文件。

Stylus的语法非常简洁，可以减少样式表的代码量。

官网：https://www.stylus-lang.cn/

1.3 选用Less

Less没有去掉任何CSS的功能，而是在现有的语法上增添了许多额外的功能特性，可以看做是CSS的一种增强版，通过Less可以用更少的代码实现更强大的样式。

Sass与Stylus相比于Less功能更为丰富，但对于学习成本以及适应时间，Less稍胜一筹。

2 引入

2.1 在页面中引入

如果是在浏览器环境中开发，可以通过引入Less的核心JS库使用Less的功能。

在官网上下载Less的JS文件，也可以通过GitHub下载：https://github.com/less/less.js/archive/master.zip

使用JS文件对Less进行编译，所以需要在Less代码后引入文件，或者在导入Less文件后引入文件：

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 在Less代码后引入 -->
<style type="text/less">
  div {
    width: 200px;
    height: 200px;
    background-color: #d44b4b;
    span {
      width: 20px;
      height: 20px;
      background-color: #47d3a4;
    }
  }
</style>
<!-- 在导入Less文件后引入 -->
<!-- <link rel="stylesheet/less" type="text/less" href="styles.less"> -->
<!-- 引入文件 -->
<script src="./less.min.js"></script>

2.2 通过命令引入

如果是在Node.js环境中开发，可以使用NPM安装Less：

bash
1
npm install -g less

使用命令将Less文件转为CSS文件：

bash
1
lessc styles.less styles.css

3 工具

VS Code：安装Easy Less插件可以在编写Less文件的时候自动创建同名的CSS文件。

4 使用

4.1 注释

以//开头的是单行注释，不会被编译到CSS中。

以/**/包围的是多行注释，会被编译到CSS中。

4.2 变量

4.2.1 变量插值

使用@声明变量，作为普通属性使用：

less
1
2
3
4
5
@background-color: #f0ffff;

span {
  background-color: @background-color;
}

如果将变量作为插值使用，需要使用@{}包裹：

less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@src: './style';
@span: span;
@color: color;
@gold: #ffd700;
@brown: #a52a2a;
@list: list;

@import '@{src}/body.less';

@{span} {
  @{color}: @gold;
  background-color: @brown;
}

.@{list} {
  @{color}: @gold;
}

4.2.2 延迟加载

当一个变量被声明多次，会取最后一次的值，并从当前作用域往外寻找变量：

less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@color: #ff1493;
body {
  width: 200px;
  height: 200px;
  @color: #ff7f50;
  div {
    width: 200px;
    height: 200px;
    color: @color;// #a52a2a
    @color: #a52a2a;
    span {
      @color: #00ffff;
      color: @color;// #ffd700
      @color: #ffd700;
    }
  }
}

4.2.3 属性变量

可以将其他属性的值作为变量使用：

less
1
2
3
4
5
span {
  border: 1px solid;
  border-color: #ff7f50;
  color: $border-color;
}

4.3 混合

混合就是将一系列属性从一个规则引入到另一个规则集的方式。

创建混合时，如果没有参数，可以省略()不写，建议保留用来区分正常的选择器，并且保留后不会被编译到CSS文件中。

调用混合时，前缀使用.和#都可以，如果没有参数，需要和创建混合时的逻辑一致。

4.3.1 普通混合

普通混合：

less
1
2
3
4
5
6
7
8
.border() {
  border: 1px #ffd700 solid;
}

div {
  .border();
  background-color: #a52a2a;
}

4.3.2 带参数混合

带参数的混合，不可以省略部分参数：

less
1
2
3
4
5
6
7
8
9
.border(@width,@color) {
  border: @width @color solid;
}

div {
  // .border(1px);// RuntimeError
  .border(1px,#ffd700);
  background-color: #a52a2a;
}

带参数默认值的混合，没有参数时使用默认值，按顺序使用：

less
1
2
3
4
5
6
7
8
.border(@width:1px,@color:#ffd700) {
  border: @width @color solid;
}

div {
  .border(1px);
  background-color: #a52a2a;
}

4.3.3 命名参数混合

带参数名称的混合，按参数名称使用，没有参数名称的按顺序使用：

less
1
2
3
4
5
6
7
8
.border(@width:1px,@color:#ffd700) {
  border: @width @color solid;
}

div {
  .border(@color:#ffd700,1px);
  background-color: #a52a2a;
}

4.3.4 包含所有参数

使用@arguments使用传入的所有参数：

less
1
2
3
4
5
6
7
8
.border(@width:1px,@color:#ffd700) {
  border: @arguments solid;
}

div {
  .border(1px);
  background-color: #a52a2a;
}

4.3.5 匹配模式

在名称和参数名相同的混合中，匹配特定的混合：

less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.size(width,@width:300px) {
  width: @width;
  height: 30px;
}
.size(height,@height:30px) {
  width: 300px;
  height: @height;
}
.size(border,@border:1px) {
  border: 1px #ffd700 solid;
}
// 万能匹配，可以匹配任何模式
// .size(@_,@size:0) {
//   display: inline-block;
// }

div {
  .size(border);// 默认匹配border中的内容，存在万能匹配时会额外匹配@_中的内容
  background-color: #a52a2a;
}

4.3.6 命名空间

支持通过命名空间选择混合，不同命名空间内的混合可以使用相同的名字：

less
1
2
3
4
5
6
7
8
9
10
11
12
13
.border() {
  .red() {
    border: 1px #ff2600 solid;
  }
  .green() {
    border: 1px #15ff00 solid;
  }
}

div {
  .border.green();
  background-color: #a52a2a;
}

4.3.7 条件筛选

支持通过when进行筛选，使用and表示且，使用,表示或，使用not表示非：

less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.border(@width,@color,@style) when (@color=#ffd700) and (@style=solid) {
  border: @width @color @style;
}
.background(@size,@color) when not (@size<12px) {
  background-color: @color;
}
.font(@size,@color) when (@size=12px), (@size=14px) {
  color: @color;
}

div {
  .border(1px,#ffd700,solid);
  .background(12px,#a52a2a);
  .font(12px,#ffd700);
}

4.4 继承

4.4.1 并集

使用&可以让多个选择器应用同样属性，被应用的必须是CSS选择器，不能是混合：

less
1
2
3
4
5
6
7
8
9
10
11
12
13
.border {
  border: 1px #ffd700 solid;
}

.border() {
  border: 1px #ffd700 solid;
}

div {
  &:extend(.border);// 继承
  .border();// 混合
  background-color: #a52a2a;
}

编译后：

css
1
2
3
4
5
6
7
8
9
10
.border,
div {
  /* 继承 */
  border: 1px #ffd700 solid;
}
div {
  /* 混合 */
  border: 1px #ffd700 solid;
  background-color: #a52a2a;
}

4.4.2 伪类

在编译的时候，会在父子级的选择器之间增加空格：

less
1
2
3
4
5
6
div {
  background-color: #a52a2a;
  span {
    background-color: #ffd700
  }
}

编译后：

css
1
2
3
4
5
6
div {
  background-color: #a52a2a;
}
div span {
  background-color: #ffd700;
}

使用&可以直接拼接，实现伪类选择器：

less
1
2
3
4
5
6
div {
  background-color: #a52a2a;
  &:hover {
    background-color: #ffd700
  }
}

编译后：

css
1
2
3
4
5
6
div {
  background-color: #a52a2a;
}
div:hover {
  background-color: #ffd700;
}

使用&还可以代替父级名称：

less
1
2
3
4
5
6
.list {
  background-color: #a52a2a;
  &-span {
    background-color: #ffd700
  }
}

编译后：

css
1
2
3
4
5
6
.list {
  background-color: #a52a2a;
}
.list-span {
  background-color: #ffd700;
}

4.5 运算

支持使用运算结果的值，单位以最左侧数值的单位为准：

less
1
2
3
4
5
6
7
8
9
10
11
12
@size1: (20cm + 10);// 30cm
@size2: (20px + 10);// 30px
@size3: (20 + 10px);// 30px
@size4: (60px / 2cm);// 30px
@color: (#446622 / 2);// #223311
.size() {
  background-color: @color;
}

div {
  .size();
}
Less
https://momashanhe.com/posts/20240519/094423/
本文作者
墨码山河
发布于
2024年5月19日
更新于
2024年9月10日
许可协议
CC BY-NC-SA 4.0
博文难免存在纰漏，如有错误之处，无论大小，恳请读者指正，博主不胜感激。
大前端

CSS

JS

Less

评论