SASS [dir="rtl"]规则在移动端响应式样式中不生效如何解决？

问题原因 #

1. 移动端DOM结构未绑定RTL标识：桌面端的.cell元素上绑定了[gbDirRtl]="isRTL"可以生成[dir="rtl"]属性，但是移动端的gb-classic-list-cell或其父容器没有同步绑定该属性，导致移动端的[dir="rtl"] .icon选择器无法匹配到对应节点，样式不生效。
2. 样式优先级冲突：你写的桌面端RTL选择器[dir="rtl"] .thumbnail .icon优先级高于移动端的[dir="rtl"] .icon，如果移动端存在样式覆盖也会导致规则失效。

解决方案 #

方案1：使用CSS逻辑属性（推荐，无需额外写RTL规则） #

直接用CSS逻辑属性inset-inline-start替代left，该属性会自动根据文本方向适配：LTR场景下等同于left，RTL场景下自动等同于right，完全不需要额外编写[dir="rtl"]的覆盖规则，代码更简洁也不会有优先级问题：

.cell {
    flex: 1 1 auto;
}

.thumbnail {
    position: relative;
    .icon {
        position: absolute;
        bottom: 10px;
        inset-inline-start: 10px; // 替换原left属性
        color: white;
    }
}

@include respond-to(mobile) {
    .icon {
        position: absolute;
        bottom: 7px;
        inset-inline-start: 7px; // 替换原left属性
    }
}

该属性兼容所有现代浏览器，是RTL适配的最优方案。

方案2：兼容老浏览器的SASS写法 #

如果你的项目需要兼容不支持逻辑属性的老版本浏览器，可以按以下步骤修改：

1. 先给移动端根容器绑定RTL属性，修改移动端HTML代码：

<gb-classic-list-cell [gbDirRtl]="isRTL">

你也可以直接把[gbDirRtl]="isRTL"绑定到整个应用的根节点上，无需每个组件单独配置，适配成本更低。
2. 统一RTL规则，调整SASS写法保证优先级一致：

.cell {
    flex: 1 1 auto;
}

.thumbnail {
    position: relative;
}

// 统一管理.icon的所有规则，避免分散导致优先级冲突
.icon {
    position: absolute;
    color: white;
    bottom: 10px;
    left: 10px;

    [dir="rtl"] & {
        right: 10px;
        left: unset;
    }

    @include respond-to(mobile) {
        bottom: 7px;
        left: 7px;
        [dir="rtl"] & {
            right: 7px;
            left: unset;
        }
    }
}

内容的提问来源于stack exchange，提问作者Manuel Brás