less 笔记 - 技术栈

html 复制代码

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

变量（Variables）

原生已支持 --前缀定义属性 var() 函数获取变量值

原生缺点不能直接外部定义全局变量

@ 前缀定义变量

使用是直接用变量名

变量可直接参与算术运算

混合（Mixins）

原生只能通过类的方式来组合样式规则，

对于常用组合，要么复制样式创建一个类，要么对应添加类名的组合

将一组属性从一个规则集包含（或混入）到另一个规则集的方法

使用 类选择器() or id选择器() 方式混入到新的规则集，避免重复书写

css 复制代码

* {
  #idName();
  .className();
}

嵌套（Nesting）

原生已完全支持

原生缺点直接标签的嵌套需要加 & 前缀才能生效

@规则嵌套和冒泡

@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。

避免了在规则内部重新书写选择器的麻烦

运算（Operations）

原生已部分支持 calc 函数使用任意 <length> 值

算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。

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

还可以对颜色进行算术运算需要加括号

(#224488 / 2)

转义（Escaping）

允许你使用任意字符串作为属性或变量值

css 复制代码

~"str"

在 Less 3.5+ 版本中，许多以前需要"引号转义"的情况就不再需要了。

函数（Functions）

逻辑函数、转换颜色、处理字符串、算术运算等

each 函数

遍历 list 并生成规则

@value, @key, and @index

在选择器和属性名中的写法 @{value}, @{key}, and @{index}

range 函数

生成数字 list

函数手册

命名空间和访问符

css 复制代码

#空间名() {
}

可以指定命名空间下的类或id进行混入，避免命名冲突

css 复制代码

#空间名.button();

映射（Maps）

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

css 复制代码

#colors() {
  primary: blue;
  secondary: green;
}

css 复制代码

color: #colors[primary];

可以理解为创建了枚举变量

作用域（Scope）

首先在本地查找变量和混合（mixins），如果找不到，则从"父"级作用域继承。

注释（Comments）

支持 js 的 // 行注释

导入（Importing）

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

css 复制代码

@import "library";