less

less

概述

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情

原理

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

注释

// 不会编译到css文件中

/**/ 会编译到文件中

变量

使用@来声明变量 如：@变量名：变量值

声明变量后把变量作为值时可以直接使用 如：@变量名

声明变量后把变量作为属性或选择器时可以使用@{变量名}

声明变量后把变量作为URL地址时可以使@{url}

Less的变量延迟加载（less里定义的变量都是延迟加载）

软套

父子的嵌套规则

&(同‘和’)的使用

Less的混合模式

将一系列的属性从一个规则集引入另一个规则集的方式

• 不带参数的混合 (.变量名(没有形参))
• 来参数的混合（.变量名(形参,形参））
• 带参数并且有默认值的混合（.变量名(形参：默认值,形参：默认值））
• 命名参数 当形参与实参不符合我们的设计时
• 匹配模式的混合
• @arguments

导入

@import “less文件名”

（如果导入的文件是 .less 扩展名，则可以将扩展名省略掉）

作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合 （mixins），如果找不到，则从“父”级作用域继承。

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

less运算

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

函数

映射

你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

继承

：extend(…[all])

less避免编译

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。