Less学习笔记

一、介绍

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

二、语法介绍

1、变量（Variables）

1.1、常规用法

1.2、变量其他用法

1.2.1选择器Selectors

1.2.2 URLs

1.2.3 Import Statements

1.2.4 Properties

1.3、 特殊用法

1）、在 Less 中，您可以使用另一个变量定义一个变量的名称。

2）、 变量在使用前不必声明

3）、两次定义变量时，使用变量的最后一个定义，从当前作用域向上搜索。这类似于 css 本身，其中定义中的最后一个属性用于确定值

1.4、属性作为变量

您可以使用 $prop 语法轻松地将属性视为变量。有时这可以使您的代码更轻一些

请注意，与变量一样，Less 会选择当前/父范围内的最后一个属性作为“最终”值

2、混合（Mixins）

2.1、 常规用法

2.2、其他用法

2.2.1、 混合使用类选择器和 id 选择器

2.2.2、 不输出 Mixin

如果您想创建一个 mixin 但不希望该 mixin 出现在您的 CSS 输出中，请在 mixin 定义之后加上括号。

2.2.3、 Mixin 中的选择器

Mixin 不仅可以包含属性，还可以包含选择器

2.2.4、命名空间

如果你想在更复杂的选择器中混合属性，你可以堆叠多个 id 或类

2.2.5、 !important 关键字

2.2.6、单个参数化混合

2.2.7、不带参数混合

2.2.8、具有多个参数的混合

定义多个具有相同名称和参数数量的 mixin 是合法的。 Less 将使用所有可以应用的属性。如果您使用带有一个参数的 mixin，例如.mixin(green); ，那么所有带有一个强制参数的 mixin 的属性都将被使用：

mixin 引用可以按名称提供参数值，而不仅仅是位置。任何参数都可以通过其名称引用，并且它们不必按任何特殊顺序排列

2.2.9、 @arguments 变量

@arguments 在 mixin 中具有特殊含义，它包含调用 mixin 时传递的所有参数。如果您不想处理单个参数，这很有用：

2.2.10、模式匹配

有时，您可能希望根据传递给它的参数来更改 mixin 的行为

2.2.11、 使用 Mixin 作为函数

3、嵌套（Nesting）

3.1、常规用法

& 运算符表示嵌套规则的父选择器，最常用于将修改类或伪类应用于现有选择器

请注意，如果没有 &，上面的示例将导致 :after 规则（匹配含有clearfix类名的标签内伪元素的后代选择器），这不是我们通常希望嵌套的 :hover 规则

& 的另一个典型用途是生成重复的类名

3.2、多个&

& 可能在一个选择器中出现多次。这使得重复引用父选择器而不重复其名称成为可能。

请注意， & 代表所有父选择器（不仅仅是最近的祖先）

3.3 更改选择器顺序

在继承的（父）选择器之前添加一个选择器会很有用。这可以通过将 & 放在当前选择器之后来完成。

& 也可用于生成逗号分隔列表中选择器的所有可能排列：

4、运算（Operations）

5、转义（Escaping）

6、函数（Functions）

具体看官方提供的函数手册

7、映射（Maps）

8、注释（Comments）

9、导入（Importing）