Less实现响应式布局靠编译期生成精确CSS规则，核心是变量统一断点（须带单位如@sm: 576px）、嵌套用&绑定选择器、列宽用percentage(1/@n)避免calc截断，所有逻辑均在编译期固化，无运行时动态适配。
Less 实现响应式布局不是靠“运行时判断屏幕尺寸”，而是靠编译期生成精确、可维护的 CSS 媒体查询规则。核心在于变量统一断点、嵌套绑定选择器、用 percentage() 算宽度、避免 calc() 截断——这些不是锦上添花，而是不这么写就容易出间隙、换行、错位。
断点必须带单位且用 @{ } 引用
直接写 @media (min-width: @sm) 会编译失败或输出无效 CSS；写成 @media (min-width: @{sm}) 才安全，但前提是 @sm 定义时已含单位：
-
@sm: 576px;✅ 正确，有单位 -
@sm: 576;❌ 错误，编译后变成@media (min-width: 576)，浏览器忽略 - 推荐用 map 统一管理：
@breakpoints: { xs: 0, sm: 576px, md: 768px, lg: 992px };，后续遍历更可控
列宽计算必须用 percentage(1 / @n)，别碰 calc(100% / @n)
Less 编译时把 calc(100% / 3) 直接算成 calc(33.333333%)，小数截断后 12 列加起来可能只有 99.999%，最后一列掉行。而 percentage(1 / @n) 返回字符串 "33.333333%"，让浏览器在运行时执行除法，精度保得住。
- 正确：
.col-@{n} { width: percentage(1 / @n); } - 错误：
width: calc(100% / @n);或width: (100% / @n); - Flex 场景下，
flex-basis比width更可靠：flex: 0 0 percentage(1 / @n);
媒体查询必须用 & 显式绑定父选择器
嵌套写法里漏掉 &，会导致选择器拼接错误，整条规则被浏览器静默丢弃：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.card { @media (max-width: @{sm}) { & { display: block; } } }→ 编译为.card@media(...) {.card{...}} - ❌ 错误：
.card { @media (max-width: @{sm}) { display: block; } }→ 编译为.card@media(...){display:block}（语法非法） - 子元素要继续嵌套，用
& ul而非ul，否则会脱离上下文
响应式表格/列表别用 nth-child，用语义类名 + Mixin
写 tr td:nth-child(3) { display: none } 看似简单，但加一列就全乱；用 .col-actions 这类语义类名，再配合参数化 Mixin，才能真正复用和维护：
- Mixin 示例：
.responsive-table(@bp, @hidden-cols) { @each @col in @hidden-cols { @{col} { visibility: hidden; width: 0; } } } - 调用：
.responsive-table(@sm, .col-actions, .col-status); - 必须用
visibility: hidden+width: 0，不用display: none，否则 table-layout: fixed 下列宽塌陷
最常被忽略的是：所有响应式逻辑都发生在编译期，没有“动态列数”这回事。所谓“适配不同屏幕”，本质是提前为每个断点生成一套确定的 CSS 规则——变量、循环、嵌套，都是为了让人脑不重复劳动，而不是让 CSS 变聪明。
