less

# lesss 简介

Leaner Style Sheets 的缩写，是一门 CSS 扩展语言, 并且兼容 CSS；
Less 增加了很多相比于 CSS 更好用的特性
比如定义变量、混入、嵌套、计算等等
Less 最终需要被编译成 CSS 运行于浏览器中（包括部署到服务器中）

# less 使用

# less 代码编译

方式一：下载 Node 环境，通过 npm 包管理下载 less 工具，使用 less 工具对代码进行编译；

方式二：通过 VSCode 插件来编译成 CSS 或者在线编译 https://lesscss.org/less-preview/

方式三：引入 CDN 的 less 编译代码，对 less 进行实时的处理；

<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

方式四：将 less 编译的 js 代码下载到本地，执行 js 代码对 less 进行编译；

<link rel="stylesheet/less" href="./less/00-基本使用.less" />
<script src="./js/less.js"></script>

1
2

# less 语法

# less 兼容 CSS

即直接在less文件中直接编写普通的CSS

# 变量(variables)

语法

@变量名: 变量值

@themeColor: #f3c258;
@mainFontSize: 12px;

.box{
    color: @themeColor;
    font-size: @mainFontSize;
}

1
2
3
4
5
6
7

# 嵌套(nesting)

.container {
  width: 200px;
  height: 200px;
  .box {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
}

1
2
3
4
5
6
7
8
9

提示

&表示当前选择器的父级

# 运算(operations)

less中，算术运算符+, -, *, / 可以对任何数字、颜色或变量进行运算；算术运算符在加、减或比较之前会进行单位换算，计算结果以最左侧操作数的单位类型为准；如果单位换算无效或失去意义，则忽略单位。一般数值运算的单位是第一个数值的单位

.box{
    height: 100px + 10%;
    background-color: #ff0000 + #00ff00;
}

1
2
3
4

# 混合(mixins)

在CSS的编写过程中可能会存在多个选择器中有大量相同的代码，希望这些代码抽取到一个独立的地方，任何选择器都可以用复用。less中提供了混入(mixins)来帮助我们完成这样的操作。

混入是一种将一组树形从一个规则集或混入到另一个规则集的方法

.border{
    border-top: 2px solid #f00;
    border-bottom: 2px dotted #0f0;
}

.box{
    height: 100px;
    background-color: orange;
    .border()
}

.container{
    height: 200px;
    background-color: purple;
    .border()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意

混入在没有参数的情况下小括号可以省略，但是不建议使用

混入也可以传入变量值

.border(@borderWidth: 2px){
    border-top: @borderWidth solid #f00;
    border-bottom: @borderWidth dotted #0f0;
}

1
2
3
4

# 映射

.colors{
    primaryColor: #f00;
    secondColor: #0f0;
}
.box{
    width: 100px;
    height: 100px;
    color: .colors[prmaryColor];
    background-color: .colors()[secondColor]
}

1
2
3
4
5
6
7
8
9
10

混入和映射结合也可以作为一个自定义函数来使用

.pxToRem(@px){
    result: (@px/@htmlFontSize) * 1rem;
}
.box{
    width: .pxToRem(100)[result];
    font-size: .pxToRem(18)[result]
}

1
2
3
4
5
6
7

# 继承(extend)

继承也可以实现代码的复用，但是继承的代码最终会转换化成为并集选择器

.border{
    border-bottom: 10px solid #000;
}
.box{
    &:extend(.border)
}

1
2
3
4
5
6

结果

.border,.box{
    border-bottom: 10px solid #000;
}

1
2
3

# 内置函数

less内置了很多函数用于转换颜色，处理字符串，算术运算等。

https://less.bootcss.com/functions/

.box{
    color: color(red); // 将red转换为RGB的值
    width: convert(100px, "in"); // 单位转换
    font-size: ceil(18.5px); // 数学函数
}

1
2
3
4
5

# 作用域

在查找一个变量时，首先在本地查找变量和混合；如果找不到则从“父”级作用域继承

.box{
    .inner{
        font-size: @fontSize;
    }
    @fontSize: 15px;
}

1
2
3
4
5
6

# 注释

在less中，块注释和注释都可以用使用

# 导入

less中导入的方式和CSS的用法是一致的，如果导入一个.less文件，此文件中的所有变量就可以全部使用了，如果导入的文件是.less扩展名，则可以将扩展名省略掉。

#less

上次更新: 2022/08/05, 08:38:16

← CSS预处理器简介 scss→