Less.js 备忘清单CSS 预处理器核心语法与内置函数实战速查【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/referenceLessLeaner Style Sheets是向后兼容 CSS 的扩展语言本指南以仓库 docs/lessjs.md 为骨架系统梳理变量、混合、嵌套、运算、映射、作用域等核心语法以及逻辑、字符串、列表与数学/颜色函数的完整用法并给出可复制的编译示例与预期输出帮助你快速上手 Less 并融入实际样式工程。入门介绍Less 是一门向后兼容的 CSS 扩展语言它在不改变 CSS 语义的前提下引入变量、混合Mixin、嵌套、运算、函数等编程能力让样式表更易维护、更可复用。本仓库在 README.md 的 CSS 分类中收录了 Less.js 速查页与 Sass、Stylus、Tailwind CSS 等同类预处理器/样式方案并列方便开发者横向对比查阅。CSS 备忘清单Less 编译产物的基础语法参考在线编译预览lesscss.org 提供粘贴 Less 代码即可实时查看编译结果适合验证本清单中的各类示例。在 Node.js 环境中使用 LessLess 以 npm 包形式发布全局安装后通过lessc命令行工具将.less文件编译为.css$ npm install -g less $ lessc styles.less styles.csslessc第一个参数为输入文件第二个参数为输出文件也可以不指定输出文件此时编译结果直接打印到标准输出便于在脚本或 CI 流程中进一步处理。在浏览器环境中使用 Less开发调试阶段可以直接在浏览器中加载 Less 运行时link relstylesheet/less typetext/css hrefstyles.less / script srchttps://cdn.jsdelivr.net/npm/less4/script注意两点link标签的rel必须写成stylesheet/less且less.js运行时脚本要放在link之后加载生产环境仍然建议预先编译为 CSS以减少首屏的实时编译开销。变量VariablesLess 使用声明变量变量可以参与运算并引用其他变量width: 10px; height: width 10px; #header { width: width; height: height; }编译 css 为#header { width: 10px; height: 20px; }变量让设计令牌间距、色板、字体尺寸集中管理一处修改全局生效结合后文的“作用域Scope”与“懒加载”机制变量声明可以出现在使用位置之后这为按模块组织变量提供了灵活性。混合Mixins混合允许把一组属性打包成可复用的规则集通过调用带括号的方式注入到其他选择器中.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }.bordered声明一次#menu a与.post a各自调用后都会获得相同的边框样式避免重复书写公共属性。混合还可以接收参数、定义默认值是构建“样式函数库”的基础。嵌套Nesting嵌套让后代选择器的书写更贴近 HTML 层级结构。传统 CSS 需要逐级展开#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } 更改为 less 的写法 ✅ #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }嵌套减少重复的前缀书写结构一目了然子规则会被编译为后代选择器#header .navigation与原生 CSS 中的空格后代组合语义一致。父选择器 引用当前选择器的父级常用于拼接类名BEM 风格与伪类.button { color: blue; -ok { background-image: url(ok.png); } :hover { color: green; } }编译 css 为.button { color: blue; } .button-ok { background-image: url(ok.png); } .button:hover { color: green; }-ok会拼出.button-ok这类派生类名:hover则生成.button:hover让“块 修饰符”“块 状态”的模式无需重复书写根类名。规则嵌套和冒泡media等 规则可以直接嵌套在规则集内部编译时会被“冒泡”到外层并自动合并媒体条件.component { width: 300px; media (min-width: 768px) { width: 600px; media (min-resolution: 192dpi) { background-image: url(/img/icon2x.png); } } media (min-width: 1280px) { width: 800px; } }编译 css 为.component { width: 300px; } media (min-width: 768px) { .component { width: 600px; } } media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/icon2x.png); } } media (min-width: 1280px) { .component { width: 800px; } }观察编译结果内层media (min-resolution: 192dpi)与外层media (min-width: 768px)通过and合并同属一个组件的响应式代码收敛在组件内部维护时无需在文件尾部单独维护媒体查询块。运算Operations算术运算符、-、*、/对任何数字、颜色或变量进行运算并尽量保留单位conversion-1: 5cm 10mm; // 结果是 6cm conversion-2: 2 - 3cm - 5mm; // 结果 -1.5cm incompatible-units: 2 5px - 3cm; // 结果是 4px base: 5%; filler: base * 2; // 结果是 10% other: base filler; // 结果是 15% base: 2cm * 3mm; // 结果是 6cm color: (#224488 / 2); // 结果是 #112244 background-color: #112244 #111; // 结果是 #223355 color: #222 / 2; // 结果是 #222 / 2, not #111 background-color: (#FFFFFF / 16); // 结果是 #101010几个值得注意的细节可换算的单位如cm与mm会先换算再运算5cm 10mm得6cm不可换算的单位组合按第一个单位参与运算2 5px - 3cm得4px颜色支持通道级运算#224488 / 2得到#112244#112244 #111得到#223355除法必须用括号包裹才会被计算(#FFFFFF / 16)得#101010裸写#222 / 2会原样输出为#222 / 2。calc() 特例为了与CSS保持兼容calc()并不对数学表达式进行计算但是在嵌套函数中会计算变量和数学公式的值var: 50vh/2; width: calc(50% (var - 20px)); // 结果是 calc(50% (25vh - 20px))即calc()内部的整体表达式原样保留给浏览器处理但其中引用变量/子表达式的部分var→25vh仍会先行求值。转义Escaping转义让原本会被 Less 当作语法的字符串原样输出早期写法使用~...min768: ~(min-width: 768px); .element { media min768 { font-size: 1.2rem; } }编译 css 为media (min-width: 768px) { .element { font-size: 1.2rem; } }从 Less 3.5 开始可以简写为min768: (min-width: 768px); .element { media min768 { font-size: 1.2rem; } }在 Less 3.5 版本中许多以前需要“引号转义”的情况就不再需要了写法更简洁且编译结果一致。函数FunctionsLess 内置了大量函数可以像编程语言一样对颜色、字符串、数值进行变换base: #f04615; width: 0.5; .class { width: percentage(width); // 返回 50% color: saturate(base, 5%); background-color: spin(lighten(base, 25%), 8); }Less 内置了多种函数用于转换颜色、处理字符串、算术运算等具体分类见本文“函数Functions”章节的详细清单。命名空间和访问符把一组混合放入带名字的规则集中即形成命名空间便于按主题组织“组件样式库”#bundle() { .button { display: block; border: 1px solid black; background-color: grey; :hover { background-color: white; } } .tab { ... } .citation { ... } }把.button类混合到#header a中我们可以这样做#header a { color: orange; #bundle.button(); // 还可以书写为 #bundle .button 形式 }#bundle()末尾的括号表示该规则集仅作为命名空间使用、不会输出到编译结果中调用时既可用#bundle.button()也可写成#bundle .button。映射Maps规则集可以充当键值映射配合[]语法取值适合定义主题色板等结构化数据#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; }输出符合预期(css).button { color: blue; border: 1px solid green; }与命名空间类似映射规则集同样以()结尾避免被编译输出取值语法为#colors[primary]。作用域ScopeLess 的变量遵循就近查找先在当前作用域查找找不到再逐级向外层查找var: red; #page { var: white; #header { color: var; // white } }和上面实例代码相同var: red; #page { #header { color: var; // white } var: white; }第二段代码演示了“懒加载Lazy Loading”变量可以先使用、后声明只要在最终求值前已定义即可因此#header中的var解析为#page作用域内的white而非外层的red。这一机制让变量声明的位置更灵活但也要注意避免同名变量带来的可读性陷阱。注释Comments块注释和行注释都可以使用/* 一个块注释 * style comment! */ var: red; // 这一行被注释掉了 var: white;/* ... */块注释会保留到编译产物中//行注释则会被剥离适合分别用于“文档说明”与“开发备注”。导入Importingimport可以把多个 Less 文件合并编译扩展名.less可省略import library; // library.less import typo.css;不带扩展名时按.less解析显式导入.css文件时按原样输出不做预编译处理。Extend:extend()让当前选择器“继承”目标规则的全部属性同时保留自身的专属声明nav ul { :extend(.inline); background: blue; } .inline { color: red; }编译 css 为nav ul { background: blue; } .inline, nav ul { color: red; }与 Mixin复制属性不同Extend 是“选择器合并”编译后.inline的规则选择器列表中加入nav ul两条规则共享同一份声明可有效压缩产物体积。逻辑函数 if booleanLess 提供条件逻辑能力boolean()把比较表达式转为布尔值if()根据条件二选一bg: black; bg-light: boolean(luma(bg) 50%); div { background: bg; color: if(bg-light, black, white); }编译 css 为div { background: black; color: white; }示例中luma(bg)计算背景亮度luma(black)不大于 50%bg-light为false因此文字颜色取if()的第三个参数white实现“深色背景自动配浅色文字”的对比度适配。字符串函数| 函数 | 说明 | | :- | :- | |escape| 将 URL 编码应用于输入字符串中的特殊字符 | |e| 字符串转义 | |%| 第一个参数是带有占位符的字符串 |escape(a1) // 输出 a%3D1 mscode: ms:alwaysHasItsOwnSyntax.For.Stuff() filter: e(mscode); // 输出 filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); format-a-d: %(repetitions: %a file: %d, 1 2, directory/file.less); // 输出 format-a-d: repetitions: 3 file: directory/file.less;escape负责百分号编码→%3De去掉外层引号原样输出常用于 filter 这类需要裸语法的属性%是格式化函数%a插入计算后的值、%d原样插入字符串参数。替换字符串 replacereplace基于正则做字符串替换支持标志位与捕获组replace(Hello, Mars?, Mars\?, Earth!); replace(One one 4, one, 2, gi); replace(This is a string., (string)\.$, new $1.); replace(~bar-1, 1, 2);预期输出Hello, Earth!; 2 2 4; This is a new string.; bar-2;第一个例子用\?转义问号精确替换Mars?第二个例子带gi标志全局 忽略大小写把两处one都替换为2第三个例子利用捕获组(string)与$1回引实现“以 string 开头的结尾替换为新串”第四个例子展示与~...转义值配合使用。lengthlist: banana, tomato, potato, peach; n: length(list);预期输出n: 4;返回值列表中的元素数。extractlist: apple, pear, coconut, orange; value: extract(list, 3);预期输出value: coconut;返回列表中指定位置的值下标从 1 开始。rangevalue: range(4); // 输出 value: 1 2 3 4; value: range(10px, 30px, 10); // 输出 value: 10px 20px 30px;生成跨越一系列值的列表单参数时从 1 生成到该值三参数时按指定步长第三个参数在起止值之间生成列表。eacheach遍历列表或规则集为每个成员绑定value、key和index变量selectors: blue, green, red; each(selectors, { .sel-{value} { a: b; } });预期输出.sel-blue { a: b; } .sel-green { a: b; } .sel-red { a: b; }每个列表成员的每个规则集都绑定到value、key和index变量。遍历规则集时键名与序号可以参与拼接set: { one: blue; two: green; three: red; } .set { each(set, { {key}-{index}: value; }); }预期输出.set { one-1: blue; two-2: green; three-3: red; }将规则集的评估绑定到列表的每个成员。each()each还可以接收混合Mixin作为回调对规则集逐项求值set-2() { one: blue; two: green; three: red; } .set-2 { // 调用 mixin 并迭代每个规则 each(.set-2(), .(v, k, i) { {k}-{i}: v; }); }预期输出.set-2 { one-1: blue; two-2: green; three-3: red; }回调的形参依次对应值、键、索引适合把“规则集 → 循环生成属性”的逻辑封装成可复用的模板。使用range和each创建一个for循环range负责生成序号each负责迭代二者组合即可模拟for循环批量生成工具类each(range(4), { .col-{value} { height: (value * 50px); } });预期输出.col-1 { height: 50px; } .col-2 { height: 100px; } .col-3 { height: 150px; } .col-4 { height: 200px; }借助插值{value}与运算value * 50px一行循环即可产出整套栅格/间距类名是 Less 中“函数式生成 CSS”的典型手法。数学函数| 函数 | 说明 | | :- | :- | |ceil(2.4)(输出 3)| 向上舍入到下一个最大整数 | |floor(2.6)(输出 2)| 向下舍入到下一个最小整数 | |percentage(0.5)(输出 50%)| 将浮点数转换为百分比字符串 | |round(1.67)(输出 2)| 应用舍入 | |sqrt(25cm)(输出 5cm)| 计算数字的平方根。保持单位不变 | |abs(25cm)(输出 25cm)| 计算数字的绝对值。保持单位不变 | |sin(1deg)(输出 0.01745240643728351)| 计算正弦函数 | |asin(-0.8414709848078965)(输出 -1rad)| 计算反正弦正弦的倒数函数 | |cos(1deg)(输出 0.9998476951563913)| 计算余弦函数 | |acos(0.5403023058681398)(输出 1rad)| 计算反余弦余弦的倒数函数 | |tan(1deg)(输出 0.017455064928217585)| 计算正切函数 | |atan(-1.5574077246549023)(输出 -1rad)| 计算反正切正切的倒数函数 | |pi()(输出 3.141592653589793)| π (pi) | |pow(0cm, 0px)(输出 1cm)| 返回第一个参数的第二个参数次幂的值 | |mod(11cm, 6px)(输出 5cm)| 返回第一个参数模数第二个参数的值 | |min(5, 10)(输出 5)| 返回一个或多个值中的最小值 | |max(5, 10)(输出 10)| 返回一个或多个值中的最大值 |注意sqrt、abs、pow、mod等函数会保留传入单位参与运算三角函数以弧度/角度为单位输入sin(1deg)min/max常用于响应式布局中钳制尺寸。颜色定义函数| 函数 | 说明 | | :- | :- | |rgb| 由红、绿、蓝通道定义颜色 | |rgba| 由红、绿、蓝通道加透明度定义颜色 | |argb| 将颜色转换为#AARRGGBB格式 | |hsl| 由色相、饱和度、亮度定义颜色 | |hsla| 由色相、饱和度、亮度加透明度定义颜色 | |hsv| 由色相、饱和度、明度定义颜色 | |hsva| 由色相、饱和度、明度加透明度定义颜色 |argb常用于兼容 IE 滤镜的filter: progid:DXImageTransform.Microsoft.gradient场景hsl/hsv系函数让颜色可以按“感知维度”调整。类型函数| 函数 | 说明 | | :- | :- | |isnumber| 值是否为数字 | |isstring| 值是否为字符串 | |iscolor| 值是否为颜色值 | |iskeyword| 值是否为 keyword | |isurl| 值是否为 url 值 | |ispixel| 值是否为像素值 | |isem| 值是否为 em 值 | |ispercentage| 值是否为百分比值 | |isunit| 值是否为指定单位的数字 | |isruleset| 值是否为规则集 | |isdefined| 值是否为 defined |类型函数通常与if()或 Mixin 守卫配合使用在运行时对参数做类型校验避免不合法的值流入样式声明。杂项函数| 函数 | 说明 | | :- | :- | |color| 将字符串解析为颜色 | |image-size| 读取图片尺寸 | |image-width| 读取图片宽度 | |image-height| 读取图片高度 | |convert| 数字单位转换 | |data-uri| 将资源内联为 data URI | |default| Mixin 守卫中的默认匹配标记 | |unit| 移除或修改单位 | |get-unit| 返回数值的单位 | |svg-gradient| 生成多色 SVG 渐变背景 |data-uri可把小图标内联进 CSS 以减少请求数svg-gradient用于生成多色渐变背景图default与守卫when配合实现“兜底分支”。颜色通道函数| 函数 | 说明 | | :- | :- | |hue| 提取色相通道 | |saturation| 提取饱和度通道 | |lightness| 提取亮度通道 | |hsvhue| 提取 HSV 色相通道 | |hsvsaturation| 提取 HSV 饱和度通道 | |hsvvalue| 提取 HSV 明度通道 | |red| 提取红色通道 | |green| 提取绿色通道 | |blue| 提取蓝色通道 | |alpha| 提取透明度通道 | |luma| 计算感知亮度luma | |luminance| 计算线性亮度luminance |luma/luminance常配合contrast或if()做自动对比度处理参见“逻辑函数 if boolean”示例。色彩运算函数| 函数 | 说明 | | :- | :- | |saturate| 增加饱和度 | |desaturate| 降低饱和度 | |lighten| 增加亮度 | |darken| 降低亮度 | |fadein| 增加不透明度 | |fadeout| 降低不透明度 | |fade| 设置绝对不透明度 | |spin| 旋转色相 | |mix| 混合两种颜色 | |tint| 与白色混合 | |shade| 与黑色混合 | |greyscale| 完全去饱和灰度化 | |contrast| 根据对比度选色 |色彩运算函数是主题系统的基础基于一个主色用lighten/darken派生悬停态与激活态用fade控制遮罩透明度用mix调和过渡色。颜色混合功能| 函数 | 说明 | | :- | :- | |multiply| 正片叠底混合 | |screen| 滤色混合 | |overlay| 叠加混合 | |softlight| 柔光混合 | |hardlight| 强光混合 | |difference| 差值混合 | |exclusion| 排除混合 | |average| 平均混合 | |negation| 反相混合 |颜色混合函数参照 Photoshop 的图层混合模式可模拟纹理叠加、高光/阴影、故障风等视觉效果常用于生成富有层次的渐变与特效背景。另见Less.js 官网CSS 备忘清单Stylus 备忘清单Sass 备忘清单同为 CSS 预处理器可横向对比语法差异在线编译预览lesscss.org 提供随时验证本文所有示例的编译输出本文示例均可在本地复现安装 Less 后执行lessc input.less output.css或直接粘贴到在线编译预览中查看即时结果仓库源码层面的相关资源位于 assets/lessjs.svg 与 README.md 中的 Less.js 条目。【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考