Sass变量无法自动适配RTL布局，需用start/end语义替代left/right、弃用@extend改用带$dir参数的@mixin、避免content硬编码方向符号、警惕第三方库left写死问题，并手动处理字体排版细节。
RTL布局下margin和padding容易写反
CSS里用margin-left或padding-right这类带方向的属性，一加RTL就失效——不是样式没生效，是逻辑反了。Sass变量本身不翻转方向，它只是替换文本，所以你得主动把“左/右”映射成“起始/结束”。
实操建议：
用start/end语义代替left/right，配合dir属性切换：
$dir: ltr;<br>@if $dir == rtl {<br> $start: right;<br> $end: left;<br>} @else {<br> $start: left;<br> $end: right;<br>}
然后写margin-#{$start}而不是margin-left。注意：别在@each循环里硬编码left/right，那等于白干。
Sass中direction不能靠@extend自动继承
有人想用@extend %rtl-rule统一处理RTL样式，结果发现子选择器没跟着变向——@extend只复制声明，不感知dir上下文。它没法判断当前元素是LTR还是RTL，更不会动态改float或text-align值。
常见错误现象：
• div[dir="rtl"] .btn里@extend %align-right，但%align-right定义的是text-align: right，在RTL里其实该是text-align: start
• 多层嵌套后dir被覆盖，@extend还在用老方向
实操建议：
• 放弃@extend做方向适配，改用@mixin封装方向逻辑
• mixin里显式接收$dir参数，或读取全局$dir变量
• 示例：@mixin text-align-dir($val) { text-align: if($val == start, start, end); }
伪元素::before/::after的content顺序在RTL里要重排
比如用content: "→ " attr(title)做图标+文字，RTL下箭头应该在右边，但默认还是左边。Sass变量能换文字，但换不了视觉顺序——这得靠unicode-bidi和direction配合，或者干脆用flex布局替代content拼接。
使用场景：
• 导航菜单项带图标前缀
• 表单label旁加必填星号*
• 时间戳前加at文字
实操建议：
• 避免在content里硬写方向性符号（如"←"或"→"）
• 用transform: scaleX(-1)翻转图标类，比换字符更可靠
• 若必须用content，配合[dir="rtl"]重写整个content值，例如：[dir="rtl"] .item::before { content: attr(title) " ←"; }
第三方组件库的RTL支持常绕过Sass变量直接写死left
像Bootstrap 4、Ant Design早期版本，很多组件内部用left: 0定位下拉菜单或Tooltip，Sass变量根本插不进去。你改了$enable-rtl，但弹出层还是从左边飞出来。
性能 / 兼容性影响：
• 强行用[dir="rtl"] .dropdown-menu { left: auto; right: 0; }覆盖，可能触发重排
• 某些动画依赖left值，right覆盖后动效错位
• WebKit内核对[dir="rtl"] + transform组合渲染有延迟
实操建议：
• 查文档确认组件库是否真正支持RTL（比如Bootstrap 5用inset-start等逻辑属性）
• 不要迷信$rtl: true开关，得看编译后CSS里有没有[dir="rtl"]规则块
• 关键组件（如日期选择器）单独写RTL修正，放在_overrides.scss里，避免污染主变量文件
最麻烦的其实是字体排版细节：阿拉伯数字在RTL段落里默认仍是左到右，而中文标点在混合文本中可能粘连异常——这些Sass变量管不了，得靠unicode-bidi: plaintext或dir="auto"微调。事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
