共计 827 个字符，预计需要花费 3 分钟才能阅读完成。
什么是 lessLess 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。如何引入 less 使用 less 有以下三种方式直接引入 Less.js 使用 CDN 在线引入在命令行 使用 npm 安装 npm install less -g3. 为什么使用 less(less 优势) 1. 变量 2. 混合嵌套 3. 方法 4. 父子元素 5.import4. 如何使用 less 1. 创建 html 页面, 在页面内引入 mian.css
2. 创建 less 页面, 并编写 less 代码
3. 运行指令 lessc main.less > main.css, 生成对应的 css 文件 在命令控制行中通过运行指令 lessc main.less > main.css, 生成对应的 css 文件 可以通过指令 lessc main.less 来预先查看编译后的 css 代码样式生辰八字起名字
5. 变量 通过 @变量名的方式来进行变量的定义 (@等同于 var), 之后通过调用变量名来进行赋值, 这样可以极大的重复代码, 对于性能优化也有很好的提升 6. 混合嵌套 在编写部分 css 代码时, 可能会出现相同属性多次使用的情况
在上面的两个样式中都使用了 border 这个属性, 并且内容完全相同；在传统 CSS 写法中只能这样一遍又一遍的去书写重复的内容，在 Less 中通过将公共属性抽取出来作为一个公共类的方式规避这一点。
总结
混合也是减少代码书写量的一个方法；
混合的类名在定义的时候加上小括弧 ()，那么在转译成 css 文件时就不会出现；
混合的类名在被调用的时候加上小括弧 () 和不加上小括弧 () 是一样的效果，看个人习惯，如：第三行和第八行转译成 css 是一样的。
7.Function
在 less 中, 我们可以通过编写一个 css 类的方法, 将值通过参数的形式进行传参, 然后只调用方法和实参, 就可以完成 css 的设置
语法
. 方法名 (形参){定义 css 属性}
.background(@color){background: @color;}
