SASS - [dir="rtl"] 未应用答案

【问题标题】：SASS - [dir="rtl"] not being appliedSASS - [dir="rtl"] 未应用
【发布时间】：2021-08-27 23:48:30
【问题描述】：

我有一个带有图标的缩略图，需要针对 RTL 进行调整。此图标的原始位置因桌面设备和移动设备而有所不同。

我对 SASS 很陌生，所以我无法将 [dir="rtl"] 规则应用于这两种情况。

这是我目前所拥有的：

.cell {
    flex: 1 1 auto;
}

.thumbnail {
    position: relative;

    .icon {
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: white;

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

@include respond-to(mobile) {
    ...

    .icon {
        position: absolute;
        bottom: 7px;
        left: 7px;

        [dir="rtl"] & { // not working
            right: 7px;
            left: unset;
        }
    }
}

桌面 HTML：

<ng-container *ngIf="!platform.isMobileSize()">
    <div class="cell" [gbDirRtl]="isRTL">
        <div class="thumbnail">
            <div class="thumbnail-image" [style.background-image]="thumbnail | backgroundimage"></div>
            <div class="icon" gbIcon [iconUrl]="icon" [size]="24"></div>
        </div>
        <div class="content">
            <div class="section-name"
                 [gbFontStyle]="subtitleFont"
            >{{formattedSubtitle}}</div>
            <div class="title"
                [gbFontStyle]="titleFont"
                gbLineClamp="3"
            >{{item.title}}</div>
        </div>
    </div>
</ng-container>

移动版 HTML：

<ng-container *ngIf="platform.isMobileSize()">
    <gb-classic-list-cell>
        <gb-background-image [src]="mobileThumbnail" [height]="'100%'" [useBackgroundImage]="true">
            <div class="icon" gbIcon [iconUrl]="icon" [size]="20" [color]="'#ffffff'"></div>
        </gb-background-image>
        <div class="heading" [gbFontStyle]="titleFont">{{ item.title }}</div>
        <div class="sub-heading" *ngIf="showInfos" [gbFontStyle]="subtitleFont">{{ formattedSubtitle }}</div>
    </gb-classic-list-cell>
    <div class="overlay" [class.visible]="showOverlay || isSelected">
        <gb-bookmark-checkbox [checked]="isSelected" (tap)="toggle()"></gb-bookmark-checkbox>
    </div>
</ng-container>

普通版可以用，手机版不行。我知道第一个目标是[dir="rtl"] .thumbnail .icon，所以它的优先级高于[dir="rtl"] .icon，但我想不出两种情况都适用的解决方案。

任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： css angular sass

【解决方案1】：

更多关于您如何编写 HTML 文件的上下文会有所帮助。

你能检查一下这些是否有效。

.icon {
  /* styles */
  
  &[dir="rtl"] {
    /* styles */
  }
}

/* OR */

.icon {
  /*styles*/
  & [dir="rtl"] {
  /*styles*/
  }
}

【讨论】：

不幸的是，这些都不起作用。我用 HTML 更新了问题。