less语法 与 scss的区别

文章目录一、Less 常用语法1. 变量 2. 嵌套 父选择器 3. Mixin混合4. 命名空间5. 运算 字符串插值6. 条件混合Guards7. 循环递归 mixin8. extend 继承9. 模块引入10. 内建函数常用11. JS 求值Less 特有但 4.0 起默认关闭二、Less vs SCSS 核心区别1. 语法差异速查2. 能力强弱对比3. 一个典型对比示例三、适用场景优先选 **SCSS**优先选 **Less**都能用不必纠结当下趋势2024-2026参考一、Less 常用语法1. 变量primary-color:#1677ff;base-font:14px;radius:4px;.btn{color:primary-color;font-size:base-font;border-radius:radius;}变量符号是SCSS 是$。作用域惰性求值—— 同一作用域内后定义的会覆盖前面的“延迟加载”。color:red;.box{color:color;}// 实际是 bluecolor:blue;2. 嵌套 父选择器.card{padding:16px;.title{font-weight:bold;}:hover{background:#f5f5f5;}__header{// BEM 拼接border-bottom:1px solid #eee;}}3. Mixin混合Less 的 mixin就是一个普通的类选择器// 无参 mixin —— 直接定义一个类 .clearfix(){::after{content:;display:block;clear:both;}}// 带参 默认值 .flex(direction:row,justify:center,align:center){display:flex;flex-direction:direction;justify-content:justify;align-items:align;}.container{.clearfix();.flex(row,space-between);}关键差异mixin 名后带()表示不输出自身、仅可被调用不带()则同时会输出为普通类。.btn{color:red;}// 既是普通类也可作为 mixin 调用 .box{.btn;}// 把 .btn 的样式拷进 .box4. 命名空间#theme{.primary(){color:#1677ff;}.danger(){color:#ff4d4f;}}.btn{#theme .primary();}5. 运算 字符串插值.box{width:100px 50px;// 150pxheight:100% / 3;// 33.3333%margin:(base-font* 2);}// 字符串插值用 {}SCSS 用 #{}prefix:app;.{prefix}-card{background:url(/img/{prefix}-bg.png);}6. 条件混合GuardsLess没有if用 mixin Guard 模拟条件.text(size)when(size 16px){font-weight:bold;font-size:size;}.text(size)when(size 16px){font-size:size;}.title{.text(20px);}// 走第一个 .body{.text(14px);}// 走第二个支持的判断when (x 1)、when (iscolor(x))、when not (...)、when (default())。7. 循环递归 mixinLess没有for / each用递归 mixin 实现.loop(i)when(i 0){.col-{i}{width:(i* 20%);}.loop(i- 1);}.loop(5);遍历列表colors:primary #1677ff,success #52c41a,danger #ff4d4f;.each(i:1)when(i length(colors)){pair:extract(colors,i);name:extract(pair,1);value:extract(pair,2);.text-{name}{color:value;}.each(i 1);}.each();对比 SCSS 的each $name, $color in $colors—— Less 写起来明显繁琐。8.extend继承.btn-base{display:inline-block;padding:8px 16px;}.btn-primary{:extend(.btn-base);background:#1677ff;}// 或 .btn-default:extend(.btn-base){background:#f5f5f5;}9. 模块引入importvariables.less;// 普通引入import(reference)mixins;// 仅引用 mixin/变量不输出import(once)reset;// 只引入一次默认行为import(less)foo.css;// 当作 less 处理Less 只有import没有 SCSS 的use/forward命名空间隔离机制。10. 内建函数常用.box{color:lighten(#1677ff,10%);background:darken(#1677ff,10%);border:1px solidfade(#000,20%);//rgba(0,0,0,0.2)color:mix(#fff,#1677ff,50%);width:percentage(0.5);// 50%height:round(3.7);// 4}颜色 / 数学函数和 SCSS 几乎一一对应。11. JS 求值Less 特有但 4.0 起默认关闭width:Math.round(100 / 3);// 需要开启 javascriptEnabled不推荐使用可移植性差且默认禁用。二、Less vs SCSS 核心区别1. 语法差异速查语法点SCSSLess变量$color: red;color: red;字符串插值#{$var}{var}父选择器引入use/forward/importimportMixin 定义mixin name() {}.name() {}Mixin 调用include name().name()函数function name() { return ... }无用 mixin 返回变量近似条件if / else if / elsemixin Guardwhen (...)循环for / each / while递归 mixinMap / 字典(key: val, ...)原生支持无只能用列表 extract 模拟列表(1, 2, 3) 丰富 API类似但 API 少继承extend .x/ 占位符%x:extend(.x)无占位符命名空间use ./m as m;→m.$x#ns { .mixin() {} }变量作用域词法 自上而下求值惰性求值同作用域内最后一次为准编译器Dart SassJS 实现主流less.jsJS内建模块sass:math/color/list/map/string/meta内建函数全局可用2. 能力强弱对比逻辑表达能力强 → 弱 SCSS (function/for/each/Map) Less (mixin Guard 递归) 学习曲线陡 → 缓 SCSS概念多use/forward、模块、Map、extend 占位符 Less几乎就是 CSS 变量 mixin10 分钟上手 工程化 / 模块化 SCSSuse 命名空间隔离、forward 重新导出 Less仅 import 社区与生态 SCSSBootstrap 5、Tailwind 配套、绝大多数组件库 LessAnt Design、阿里系组件库3. 一个典型对比示例生成栅格类// SCSS清晰简洁for$i from 1 through 12{.col-#{$i}{width:percentage($i / 12);}}// Less必须递归 mixin .gen(i)when(i 0){.col-{i}{width:percentage(i/ 12);}.gen(i- 1);}.gen(12);遍历主题色// SCSS $colors:(primary:blue,danger:red);each$name,$c in $colors{.text-#{$name}{color:$c;}}// Lesscolors:primary blue,danger red;.loop(i:1)when(i length(colors)){p:extract(colors,i);.text-{extract(p,1)}{color:extract(p,2);}.loop(i 1);}.loop();三、适用场景优先选SCSS复杂业务系统 / 中后台需要遍历配置生成样式栅格、间距、主题色阶、工具类。设计系统 / 组件库需要 Map 管理 token、use做模块化、function抽象。多主题、可定制 UI 库SCSS Map 配合 CSS 变量产出多套主题最顺手。跟 Bootstrap、Tailwind 主题、Element Plus其底层 SCSS配合。团队偏后端思维if / each / function写起来更像编程语言。优先选LessAnt Design (v4 及以前) 二次开发AntD 老版本默认 Less定制主题用modifyVars。简单项目 / 内部工具站只需要变量 嵌套 少量 mixinLess 上手快、心智负担低。历史项目存量原项目就是 Less没必要切换。运行时按需改变量CDN 引 less.js 实时编译已较少见。团队成员对 CSS 更熟不想多学一套语义。都能用不必纠结只是给项目加点变量、嵌套和 mixin。现代项目里两者最终能力差距越来越小因为复杂逻辑通常用CSS 变量做运行时换肤PostCSS / Tailwind / UnoCSS做工具类CSS-in-JS做组件级样式当下趋势2024-2026参考项目类型主流选择新建 Vue 3 项目SCSSVite 默认推荐组件库多用 SCSS新建 React 项目CSS Modules / Tailwind / styled-components预处理用 SCSS 居多AntD v4 老项目Less继续用AntD v5 项目CSS-in-JS已抛弃 LessElement Plus 项目SCSSBootstrap 项目SCSS