【笔记】Less学习笔记

发表于 更新于 阅读次数：

前言

Less（或写作LESS）是一种由Alexis Sellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。（维基百科）

Less（Leaner Style Sheets）

Less是完全兼容CSS的，所以可以直接在.less文件中编写CSS代码

编译Less文件为CSS文件

通过JS编译

1
2
3
4
5
6
7
<style type="text/less">
  ...
</style>

<link rel="stylesheet/less" href="">

<script src="less.min.js"></script>

通过命令行工具编译

下载依赖

1
npm install -g less

编译

1
lessc <file>.less

引入其他Less文件

  • 在一个less文件中引入另一个less文件

引入后立即编译

<file>：另一个less文件的文件名，指定后缀名或者不指定后缀名都可以

1
@import "<file>";

引入后不立即编译

1
@import (reference) "<file>";

引入时重复代码不再编译

1
@import (once) "<file>";

允许引入多个同名的Less文件

1
2
@import (multiple) "<file>";
@import (multiple) "<file>";

注释

1
2
3
// 单行注释，单行注释编译后不会出现在CSS文件中

/* 多行注释，多行注释编译后会出现在CSS文件中 */

变量

  • 变量通常全部放在文件头部

选择器变量

1
2
3
4
5
@变量名: #id;

@{id} {
  ...
}
1
2
3
4
5
@变量名: id;

#@{id} {
  ...
}

属性变量

1
2
3
4
5
@变量名: 值;

div {
  color: @变量名;
}

路径变量

1
2
3
4
5
@变量名: "../images/";

div {
  background: url("@变量名/01.png");
}

声名变量

1
2
3
4
5
@变量名: {background: #FFF;};

div {
  @变量名();
}

变量运算

  • 为了防止运算符被当作变量名，在运算符左右要用空格隔开
1
2
3
4
5
@width: 300px;

div {
  width: (@width - 10) * 2;
}

变量定义变量

1
@变量名: @变量名2

CSS嵌套

  • 副选择器：&表示当前选择器的父级
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#div1 {

  ...

  & #div2 {

    ...

  }

  &:hover {

    ...

  }
}

简写

  • 可以省略&
1
2
3
4
5
6
7
8
9
10
#div1 {

  ...

  #div2 {

    ...

  }
}

运算符

算数运算符

  • 计算结果以左侧操作数的单位类型为准

  • 如果单位换算无效或失去意义，则忽略单位

  • +、-、*、/

1
@变量名: 2px + 2;
1
@变量名: 2px + 2em;
1
@变量名: #FF0000 + #00FF00;

比较运算符

  • >、<、>=、<=、=

混入（Mixins）

  • 任何选择器都可以作为混入函数使用，通常使用类选择器，避免id选择器不能重名的问题

无参数混入

定义混入

1
2
3
.类名() {
  background-color: #FFF;
}
省略小括号
1
2
3
.类名 {
  background-color: #FFF;
}

使用混入

1
2
3
div {
  .类名();
}
1
2
3
div {
  background-color: #FFF;
}
使用混入中的指定属性
  • 混入与映射组合使用，实现使用混入中的指定属性
1
2
3
div {
  .类名(参数值)[background-color];
}
1
2
3
div {
  background-color: 参数值;
}

有参数混入

定义混入

1
2
3
.类名(@变量名: #FFF) {
  background-color: @变量名;
}

使用混入

不传递参数
  • 不传递参数会使用默认值
1
2
3
div {
  .类名();
}
1
2
3
div {
  background-color: #FFF;
}
传递参数
  • 传递多个参数时用,分隔实参
1
2
3
div {
  .类名(#000);
}
1
2
3
div {
  background-color: #000;
}

引入全部参数

  • 通过@arguments引入全部参数

定长参数

定义混入
1
2
3
.类名(@width: 1px, @style: solid, @color: #FFF) {
  border: @arguments;
}
使用混入
1
2
3
div {
  .类名(1px, solid, #FFF);
}
1
2
3
div {
  border: 1px solid #FFF;
}

不定长参数

定义混入
1
2
3
.类名(...) {
  border: @arguments;
}
使用混入
1
2
3
div {
  .类名(1px, solid, #FFF);
}
1
2
3
div {
  border: 1px solid #FFF;
}

混入的匹配模式

定义混入

  • 通过第一个参数作为匹配模式，在使用时只需要指定匹配模式，就可以得到指定缺省值的混入
    • 如果第一个参数为@_表示使用时没有指定匹配模式时的匹配项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.类名(top, @color: #FFF) {
  border-color: transparent transparent @color transparent;
}
.类名(right, @color: #FFF) {
  border-color: transparent @color transparent transparent;
}
.类名(bottom, @color: #FFF) {
  border-color: @color transparent transparent transparent;
}
.类名(left, @color: #FFF) {
  border-color: transparent transparent transparent @color;
}
.类名(@_, @color: #FFF) {
  border-color: transparent transparent transparent transparent;
}

使用混入

1
2
3
div {
  .类名(left, #FFF);
}
1
2
3
div {
  border-color: transparent transparent transparent #FFF;
}

混入的命名空间

定义混入

1
2
3
4
5
.类名1() {
  .类名2() {
    background-color: #FFF;
  }
}

使用混入

1
2
3
dev {
  .类名1() > .类名2();
}
1
2
3
div {
  background-color: #FFF;
}

同名属性混入时拼接

通过逗号分隔

  • 定义混入时为属性名添加+作为后缀，如果使用混入时遇到同名属性，会通过,拼接多组属性值
定义混入
1
2
3
.类名() {
  transition+: color 1 linear 0;
}
使用混入
1
2
3
4
div {
  .类名();
  transition+: background-color 1 linear 0;
}
1
2
3
4
div {
  transition: color 1 linear 0,
              background-color 1 linear 0;
}

通过空格分隔

  • 定义混入时为属性名添加+_作为后缀，如果使用混入时遇到同名属性，会通过空格拼接多组属性值
定义混入
1
2
3
.类名() {
  transform+_: translate(0);
}
使用混入
1
2
3
4
div {
  .类名();
  transform+_: scale(0);
}
1
2
3
div {
  transform: translate(0) scale(0);
}

指定最高优先级

使用混入

  • 在使用混入时仍然可以通过!important指定最高优先级
1
2
3
div {
  .类名() !important;
}

具有条件筛选的混入

  • 通过when关键字定义条件表达式，多个条件表达式可以用逻辑运算符连接
1
2
3
.类名() when (条件表达式) {
  background-color: #FFF;
}

与逻辑

  • 通过and定义与条件
1
2
3
.类名(@width) when (条件表达式) and (条件表达式) {
  background-color: #FFF;
}

或逻辑

  • 通过,定义或条件
1
2
3
.类名(@width) when (条件表达式) , (条件表达式) {
  background-color: #FFF;
}

非逻辑

  • 通过not关键字定义非条件
1
2
3
.类名(@width) when not (条件表达式) {
  background-color: #FFF;
}

继承（Extend）

  • 通过:extend()实现继承，继承后，父类和子类会添加共有的并集选择器，选择器的内容为父类定义的属性

与指定父类实现继承关系

定义父类

1
2
3
.父类名 {
  color: #FFF;
}

定义子类

1
2
3
.子类名():extend(.父类名) {
  background-color: #FFF;
}

编译后的CSS

1
2
3
4
5
6
7
8
.父类名,
.子类名 {
  color: #FFF;
}

.子类名 {
  background-color: #FFF;
}

与指定父类相关的所有类实现继承关系

定义父类

1
2
3
4
5
6
7
.父类名1 {
  color: #FFF;
}

.父类名1 父类名2 {
  font-size: 16px;
}

定义子类

  • 通过all关键字实现继承所有相关父类
1
2
3
.子类名():extend(.父类名1 all) {
  background-color: #FFF;
}

编译后的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.父类名1,
.子类名 {
  color: #FFF;
}

.父类名1 父类名2,
.子类名 {
  font-size: 16px;
}

.子类名 {
  background-color: #FFF;
}

Less内置函数

数学运算

计算

1
calc();

向上取整

1
ceil();

向下取整

1
floor();

转换函数

颜色转换

  • 将颜色关键字转换为十六进制数
1
color("red");

单位转换

  • 在指定类型的单位间互相转换

长度单位

m、cm、mm、in、pt、px、pc

时间单位

s、ms

角度单位

rad（弧度）、deg（度）、grad（梯度）、tum（圆）

1
convert("1cm", "px");

检测函数

类型检测

检测是否是颜色
1
iscolor(#FFF)
检测是否是数值
1
isnumber(1);
检测是否是字符串
1
isstring("");
检测是否是系统保留字
1
iskeyword(div);
检测是否是URL
1
isurl(url());

单位检测

  • 检测字符串中除了数值是否是某一种单位
    • 0没有任何单位，但是0%的单位是%
检测是否是像素
1
ispixel(1px);
检测是否是百分比
1
ispercentage(1%);
检测是否是em
1
isem(1em);
检测是否是指定的单位

<unit>：指定单位，除了%，其他单位都可以省略双引号

px、rem、em、pt、mm、%

1
isunit(@num, "<unit>");

完成

参考文献

哔哩哔哩——码歌
Less中文网