主页 / coding / 问题 / 77589856
Accepted
Raghavan Vidhyasagar
Asked: 2023-12-02 17:55:33 +0800 CST

scss 代码忽略 & 运算符的第一个子级

  • 772

我用的是这个scss（我的scss版本）

section[data-testid="title-cast"] {
    .ipc-media--avatar-circle,
    .ipc-avatar {
        &,
        .ipc-lockup-overlay,
        .ipc-lockup-overlay__screen {
            border-radius: 5px !important;
        }
    }
}

得到这个CSS（预期输出）

section[data-testid="title-cast"] .ipc-media--avatar-circle,
section[data-testid="title-cast"] .ipc-avatar,
section[data-testid="title-cast"] .ipc-avatar .ipc-lockup-overlay,
section[data-testid="title-cast"] .ipc-avatar .ipc-lockup-overlay__screen {
    border-radius: 5px !important;
}

但得到了这个CSS（输出错误）

section[data-testid=title-cast] .ipc-media--avatar-circle,
section[data-testid=title-cast] .ipc-media--avatar-circle .ipc-lockup-overlay,
section[data-testid=title-cast] .ipc-media--avatar-circle .ipc-lockup-overlay__screen,
section[data-testid=title-cast] .ipc-avatar,
section[data-testid=title-cast] .ipc-avatar .ipc-lockup-overlay,
section[data-testid=title-cast] .ipc-avatar .ipc-lockup-overlay__screen {
  border-radius: 5px !important;
}

如何

sass

1 个回答

  1. Best Answer

    您可以使用@extend来获得预期的输出：

    section[data-testid="title-cast"] {
  .ipc-media--avatar-circle {
    border-radius: 5px !important;
  };
    
  .ipc-avatar {
    &,
    .ipc-lockup-overlay,
    .ipc-lockup-overlay__screen {
      @extend .ipc-media--avatar-circle;
    }
  }
}
    • 1

相关问题