怎样使用Less构建支持RTL镜像布局的CSS库-css教程-PHP中文网

Less不支持运行时RTL切换，必须编译期确定；正确做法是用@dir变量配合.when守卫mixin分别定义LTR/RTL规则（如padding-left/right），并严格依赖HTML的dir属性生效，否则样式不翻转。

怎样使用less构建支持rtl镜像布局的css库

Less 本身不支持运行时 RTL 切换，所有方向逻辑必须在编译期确定；真正可行的路径是：用 @dir 变量 + .when 条件 mixin 封装方向规则，并严格配合 HTML 的 dir 属性生效——否则样式不会自动翻转，也别指望它响应 direction: rtl。

用 `.when` 混合封装方向感知规则，而不是拼接属性名

Less 没有 if() 函数（那是 Sass 的），但支持带守卫条件的 mixin（.name(...) when (...)）。你不能写 margin-@{dir}——CSS 不认这种动态拼接，margin-rtl 是非法属性名。

正确做法是把方向映射为具体值，再注入到物理属性中：

.pad-start(@size) when (@dir = ltr) { padding-left: @size; }
.pad-start(@size) when (@dir = rtl) { padding-right: @size; }

.text-align() when (@dir = ltr) { text-align: left; }
.text-align() when (@dir = rtl) { text-align: right; }

调用时直接写 .pad-start(12px); .text-align();。注意：

每个分支必须写出完整 CSS 属性，单位和值不能省略
若 @dir 未定义或值非法（如 ltrr），两个 .when 都不匹配，样式不会输出——这比静默 fallback 更安全
不要在 @each 循环里套 .when，Less 不支持嵌套条件判断

入口文件分 LTR/RTL 两套，避免 `@import (multiple)` 陷阱

@import (multiple) 并不重置变量作用域。即使你先写 @dir: ltr; 再 @import "shared.less"，然后又写 @dir: rtl; 再 import 一次，第二次仍读取第一次定义的 @dir 值。

更实际、稳定的做法是拆成两个独立入口：

// ltr.less
@dir: ltr;
@import "shared.less";

// rtl.less
@dir: rtl;
@import "shared.less";

构建时分别编译出 app-ltr.css 和 app-rtl.css，前端根据 document.documentElement.dir 加载对应文件。这是目前兼容性最好、最可控的方式。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

为什么不能只靠 `dir="rtl"` 或 `direction: rtl`

仅在上设属性只是触发点，不是终点。它不会让 margin-left 自动变成“右边距”，也不会翻转 background-position: left top 或 SVG 图标方向。

关键事实：

margin-left/padding-right 等物理属性完全无视 dir，必须显式替换为 margin-inline-start/padding-inline-end
float: left 没有逻辑等价物，只能用 float: rtl-val(left, right)（SCSS）或 .float-start() mixin（Less），但更推荐用 display: flex 重构
图标、箭头、背景图路径等需单独处理：transform: scaleX(-1) 适用于纯装饰性 SVG，但含文字的图标需重置子元素 transform