小胖墩er
小胖墩er
2021-10-22

Less的基本使用

# 介绍

less 是CSS扩展语言（预编译语言），使 CSS 更易维护和扩展。less是基于js开发的，在node中或者引入less.js文件进行转义，推荐使用node将less文件转换为css文件而不是直接在浏览器端使用less。将less.js引入到前端页面对less进行编译中会增加浏览器负担。

# 安装less依赖

将npm源设置为国内淘宝镜像

npm config set registry https://registry.npm.taobao.org
1

全局安装 less依赖支持

npm install -g less
1

# 变量

概念： less允许开发人员使用编程语言一样声明变量，用来存储那些被认为在开发中经常会被重复使用的数据（如：主题颜色，常用标题字体大小）

语法： @变量名 : 变量值 ;

语法.png

注意

  1. less 支持使用@{变量}形式进行字符串拼接,该模式可以应用在选择器、属性名和url上使用

注意.png 2. less自身支持基本运算同时中变量也支持基本运算 + - * / %

对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm 

// 转换是不可能的   incompatible-units(不兼容的单位)
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px 

// 带变量 
@base: 5%; 
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
1
2
3
4
5
6
7
8
9
10
11

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm
1

你还可以对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
1
2

# 嵌套

概念： Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。换句话说就是在less中关系选择器允许使用嵌套语法合并选择器减少代码量

假设我们有以下CSS代码：

css.png 换成less我们可以这样书写

嵌套.png

注意

  1. 在开发中不要使用id选择器去修改样式,id选择器遍历查找速度较慢

  2. 嵌套语法最多只能嵌套3层, 嵌套层级太深会影响css样式遍历速度

.demo { 
    .test { 
        .small { 
            /*停止嵌套*/ 
            .little {} // Error: 嵌套层级太深 
        } 
        
        .little{} // 建议将内部选择器放到外部 
    } 
}
1
2
3
4
5
6
7
8
9
10
  1. 嵌套语法选择器一定要在普通属性下方,并且选择器前要间隔一个空行
.demo { 
    .test {} // Error: 嵌套样式选择器必须要在普通属性下方 
    width: 18px; 
} 

.demo {
    width: 18px; 
    // 选择前前面一定要有空行间隔 
    .test {} // Ok 
}
1
2
3
4
5
6
7
8
9
10
  1. 嵌套语法中特殊字符&代表当前父选择器自身,一般用该符号合并伪选择器语法

&.png 5. less支持媒体查询的嵌套语法(冒泡),媒体查询的嵌套会根据嵌套的顺序使用and连接

媒体查询.png

# @import

概念: less可用通过@import 关键字引入其他less或css文件

语法:

@import "./tool.less" // 在less文件中引入less文件可以忽略后缀名
@import "./theme" // 等价于 @import "./theme.less" 
@import "./style.css" // less 文件中引入 css 不能忽略后缀名
1
2
3

注意：less在通过@import引入其他less文件时，会将其他文件less文件内部代码添加到当前less文件中并转义成css文件，而引入css文件时并不会将css文件的内容添加到整个less文件中只会编译后的css文件中通过@import引入外部css文件。

# Mixin

概念： Mixin是一种可以将一组属性集合从一个规则集合中混入到另一个规则集合的方法 假设我们定义了一个类（class）如下：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
1
2
3
4

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

代码示例一：

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}
1
2
3
4
5
6
7
8
9

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（注意，你也可以使用 #ids 作为 mixin 使用。）

注意

  • 规则集可以接收多个参数，任意选择器(除标签选择器)都可以理解为没有参数的规则集(默认没有参数，代码参考上面的示例一)
  • 接收多个参数的规则集，并且接收参数的规则集不会被编译到css文件当中(这种用法就类似一个函数，传递形参然后调用的感觉，代码参考示例二)
  • 接收规则集的参数允许拥有默认值(代码参考示例三) 代码示例二：
// demo 接收两个参数 @width @height, 接收参数的规则集不会被编译到css文件
.demo(@width, @height) {
  width : @width;
  height: @height;
}

.box {
  .demo(19px, 20px);
  color: blue;
}

/*编译后*/
// demo 不会被编译到css中
.box {
  width :19px;
  height: 20px;
  color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

代码示例三：

.demo(@width: 77px, @height: 55px) {
  width : @width;
  height: @height;
}

.box {
  .demo() // 等价于.demo
}
/*编译后*/
.box {
 width : 77px;
 height: 55px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

less不允许在传参时已传参数前有空缺参数

参数.png Mixin规则集可以作为一个专门用来承担一些特殊规则计算的函数

mixin.png

# when函数

概念： less中的判断语句函数与if()等价接收一个判别式作为参数，当满足判别式时when语句内的代码将会生效

语法： 选择器 when (@var = true) { css属性集 }

@age: 20;

.button when(@age < 18) {
 background-color: green;   
}

/*编译后*/
.button  {
 background-color: green;   
}
1
2
3
4
5
6
7
8
9
10

# Less循环

概念： less循环与js的while语句很相似，其实是一个递归函数配合when函数一起使用，当不满足when函数判别式时将会停止

.loop(@counter) when (@counter > 0) {
  width: (10px * @counter); // 一些属性的设置
  .loop(@counter - 1)
}

div {
  .loop(5); // launch the loop
}
1
2
3
4
5
6
7
8

less循环.png

# List

概念: list是less中用来存放多个数据的一种数据类型等价于js的数组,每个数据之间使用空格或逗号","间隔

语法:

@list1: 1px solid #ccc; // 这是一个空格间隔的数组
@list2: 1, 2, 3, 4;//这是一个逗号间隔的数组
// 两者在使用less 提供的 list 函数时没有区别
// 但是直接将两者赋值给属性值式 两者都会以字符串的形式赋值 导致逗号隔开的数组会保留逗号
.box {
    border: @list1;
    margin: @list2;
}

/*编译后*/
.box {
    border: 1px solid #ccc;
    margin: 1, 2, 3, 4; // 编译后逗号依然保留
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# List API

  1. length(@list) : 返回数组长度
@list: 1px, solid, #ddd;

.box {
    z-index: length(@list);
}

/*编译后*/

.box {
    z-index: 3;
}
1
2
3
4
5
6
7
8
9
10
11
  1. extract(@list,@index): 返回数值对应下标项@index的值(less list下标从一开始计算的)
@arr : 2,
3,
6,
8;

.box {
    z-index: extract(@arr, 3);
}

/*编译后*/
.box {
    z-index: 6;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

[案例]

使用length和 extract 配合loop实现数组的遍历

案例 (2).png 3. range(@start,@end,@step) 根据参数生成指定范围的数组

@list: range(5) // 等价于 range(1,5,1) => @list: 1 2 3 4 5;
@list: range(5,8) // 等价于 range(5,8,1) => @list: 5 6 7 8;
@list: range(5px,15px,5) // start与end可以包含单位  @list: 5px 10px 15px;
1
2
3
  1. each(@list, 规则集): 遍历当前数组或者maps,在each参数而规则集中可以通过访问变量@index (当前遍历项的下标) @value(当前遍历项的值) @key(在maps中使用当前遍历项的key值)

遍历数组

遍历数组 (2).png

遍历maps

遍历maps.png

注意:each方法中参数二规则集的 @index @value @key三个变量名可以自定义

@obj : {
  size: 18;
  type: 19;
  desc: 20;
}

each(@obj,.(@v, @k, @i){
.map-@{k} {
    z-index: @i;
    top: @v;
}  
})
1
2
3
4
5
6
7
8
9
10
11
12

# 参考链接

Less 中文网 (opens new window)

在线编辑 (opens new window)
#CSS&CSS预处理器
上次更新: 2021/11/14, 07:48:46
毛玻璃效果
Sass的基本使用

← Sass的基本使用→

最近更新
01
毛玻璃效果
 11-23
02
svg基本绘制
 11-23
03
滑动登录界面
 11-23
更多文章>
🖥️

© 2021 小胖墩er 💌 粤ICP备2021158933号 🛀 Theme by 💝 Vdoing

×