Início / coding / Perguntas / 77589856
Accepted
Raghavan Vidhyasagar
Asked: 2023-12-02 17:55:33 +0800 CST

código scss para ignorar o primeiro filho do operador &

  • 772

Eu usei este scss (minha versão do scss)

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

para obter este css (saída esperada)

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;
}

mas recebi esse css (resultado errado)

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;
}

como

sass

1 respostas

  1. Best Answer

    Você pode usar @extendpara obter a saída esperada:

    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

relate perguntas