掌握Less预处理语言：提升CSS开发效率的终极指南

一、Less简介1.1 什么是LessLess​ 是一门CSS的预处理语言是一种动态样式语言属于CSS预处理器的范畴。它扩展了CSS语言增加了变量、Mixin混合、函数等特性使CSS更易维护和扩展。Less中文官网​ Less.js 中文网1.2 CSS的短板CSS作为一门标记性语言存在以下问题问题说明缺乏逻辑性简单易懂但不像编程语言浏览器兼容语法更新时兼容问题比较麻烦维护困难大型项目中CSS代码冗余严重1.3 预处理语言的诞生随着Web技术的发展出现了预处理语言让CSS彻底变成了一门可以使用变量、循环、继承、自定义方法等多种特性的标记语言逻辑性得以大大增强。三大主流CSS预处理器语言诞生年份编写语言特点Sass​2007年Ruby功能全面国内外都很受欢迎Less​2009年JavaScript受Sass影响增加了变量、混合、函数等功能Stylus​2010年Node.js语法功能和Sass不相伯仲二、Less的安装与使用2.1 安装方式方式一VSCode插件推荐在VSCode中搜索并安装Easy LESS​ 插件保存.less文件时会自动编译生成对应的.css文件。方式二HBuilderX插件在HBuilderX中安装对应的Less插件同样可以实现自动编译。方式三运行时编译不推荐script srchttps://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js/script缺点编译页面时将Less转成CSS会影响网站性能。三、Less注释// 写法一这是less的注释CSS看不见不会被编译到CSS文件中 /* 写法二这是CSS的注释CSS文件可以看到会被编译到CSS文件中 */注释方式是否会编译到CSS中//❌ 不会/* */✅ 会四、变量Variables4.1 普通变量语法​变量名: 样式值;作为普通属性值使用时直接使用变量名。// 定义普通变量 c: red; w: 100px; #wrap { width: w; height: w; background-color: c; h1 { color: c; } }4.2 变量作为选择器或属性名使用{变量名}的格式。selected: #wrap; c: red; w: width; {selected} { {w}: 300px; height: 300px; border: 10px double black; background-color: c; margin: 0 auto; }4.3 变量作为URLu: ../img/img1.png; .wrap { width: 200px; height: 200px; background-color: red; background: url(u) no-repeat; background-size: cover; }五、嵌套规则Nesting5.1 基本嵌套规则Less允许使用嵌套的方式编写CSS反映DOM结构层级关系。#wrap { width: 300px; height: 300px; border: 10px solid red; .box1 { width: 100px; height: 100px; background: pink; } .box2 { width: 50px; height: 50px; background: deeppink; } }5.2 的使用符号表示当前选择器的父级常用于伪类、伪元素等场景。.box { :hover { background-color: red; } ::after { content: ; display: block; } }六、混合Mixins混合是将一系列属性从一个规则集引入到另一个规则集的方式类似于Ctrl C Ctrl V。混合的定义在Less中明确使用.的形式来定义。6.1 普通混合会编译到原生CSS中// 定义混合重复的代码提取出来 .box { width: 100px; height: 100px; margin-bottom: 10px; } #wrap { width: 300px; height: 300px; border: 10px solid red; .box1 { .box(); // 使用混合 background: pink; } .box2 { .box(); // 使用混合 background: deeppink; } }6.2 不带输出的混合定义时加括号不会被编译到CSS中。// 定义不带输出的混合 .box() { width: 100px; height: 100px; margin-bottom: 10px; }6.3 带参数的混合// 定义带参数的混合 .box(w, h, b) { width: w; height: h; margin-bottom: b; } #wrap { .box1 { .box(100px, 100px, 10px); // 传入参数 background: pink; } .box2 { .box(50px, 50px, 20px); // 传入参数 background: deeppink; } }6.4 带参数且有默认值的混合// 定义带参数并且有默认值的混合 .box(w: 100px, h: 100px, b: 10px) { width: w; height: h; margin-bottom: b; } #wrap { width: 300px; height: 300px; border: 10px solid red; .box1 { .box(); // 使用默认值 background: pink; } .box2 { .box(50px, 50px, 20px); // 传入参数覆盖默认值 background: deeppink; } }6.5 命名混合可以通过指定参数名来传参不关心参数顺序。// 定义带参数并且有默认值的混合 .box(w: 100px, h: 100px, b: 10px) { width: w; height: h; margin-bottom: b; } #wrap { width: 300px; height: 300px; border: 10px solid red; .box1 { // 使用命名混合指定参数名 .box(b: 10px, w: 100px, h: 100px); background: pink; } .box2 { .box(50px, 50px, 20px); background: deeppink; } }6.6 匹配模式可以定义一个混合库文件如minx.less在实际写Less时引入混合库。minx.less 文件内容// 定义匹配混合 .arrows(_, w: 10px, c: red) { width: 0; height: 0; border: w solid c; } .arrows(Top, w: 10px, c: red) { border-color: transparent transparent c transparent; } .arrows(Bottom, w: 10px, c: red) { border-color: c transparent transparent transparent; } .arrows(Left, w: 10px, c: red) { border-color: transparent c transparent transparent; } .arrows(Right, w: 10px, c: red) { border-color: transparent transparent transparent c; }主文件引入并使用import url(./minx.less); // 或 import ./minx.less; #arrows { .arrows(Right, 30px, green); // 使用匹配混合 }6.7 arguments变量arguments代表所有传入的参数。.b(w: 10px, s: solid, c: red) { // border: w s c; border: arguments; // arguments w s c } #wrap { width: 200px; height: 200px; background: pink; .b(); }七、运算OperationsLess支持算术运算可以对数值进行加减乘除操作。w: 100px; #wrap { width: w * 2; // 200px height: 200px; background-color: red; }八、避免编译Escaping有时我们希望某些CSS代码不被Less编译原封不动地交给CSS处理。语法​~值#wrap { // calc() 是CSS3的新增功能用来指定元素的长度 // ~... Less不编译原封不动交给CSS编译 width: ~calc(700px - 200px); height: 100px; background-color: red; }九、继承Extend继承与混合的区别特性混合Mixins继承Extend实现方式复制粘贴并集选择器代码体积较大重复代码较小合并选择器性能较低较高灵活度较高较低.box { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; :hover { background-color: red; } } #wrap { width: 300px; height: 300px; border: 10px solid red; margin: 50px auto; position: relative; } #box1 { width: 200px; height: 200px; background-color: orange; // 继承使用公共的样式 :extend(.box); } #box2 { width: 100px; height: 100px; background-color: pink; // 继承使用公共的样式包括:hover等 :extend(.box all); }编译后的CSS.box, #box1 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .box:hover, #box2:hover { background-color: red; } #box2 { width: 100px; height: 100px; background-color: pink; }注意​.box all表示继承.box及其所有相关的样式如伪类等而不加all只继承.box本身的样式。十、Less核心功能速查表功能语法说明变量​变量名: 值;存储颜色、尺寸等常用值嵌套​父级 { 子级 {} }反映DOM层级结构 符号​:hover表示当前选择器的父级混合​.mixin() { ... }代码复用复制粘贴带参混合​.mixin(param) { ... }可传参的代码复用匹配模式​.mixin(标识符, param)根据标识符选择不同样式arguments​border: arguments;代表所有传入参数运算​ - * /数值计算避免编译​~值原封不动输出CSS继承​:extend(.selector)并集选择器复用代码十一、总结本文详细介绍了Less预处理器的核心知识点基础概念Less是什么与Sass、Stylus的对比安装使用VSCode插件、运行时编译等方式变量普通变量、选择器/属性名变量、URL变量嵌套规则基本嵌套、符号的使用混合普通混合、不带输出混合、带参混合、命名混合、匹配模式、arguments变量运算数值的加减乘除避免编译使用~跳过Less编译继承与混合的区别使用:extend实现代码复用掌握Less后你将能够大幅提升CSS的开发效率和代码可维护性特别是在大型项目中Less的优势会更加明显。