Есть ли кто-нибудь, кто может помочь мне с небольшой продвинутой проблемой s css?

Question

.c-button {
  $self: &;
  
  &#{&}--outlined.primary {
    color: yellow;
  }
  
  &#{&}--outlined.secondary {
    color: red;
  }
}

<button class="c-button c-button--outlined primary"><button>
<button class="c-button c-button--outlined secondary"><button>

Как видно из приведенных выше блоков кода, я могу стилизовать то, что хочу. Однако я хочу реализовать это четко. Я попробовал один способ реализации более логичного, как показано ниже, но я не смог :) Если мой стиль выбора класса странен для вас, я могу сказать, что ". c -button. c -button - обрисована в общих чертах" то же самое с "& # {&} - обрисовано в общих чертах"

.c-button {
  $self: &;
  
  &#{&}--outlined[class*="."] {
     .primary {
        color: yellow;
     }

     .secondary {
        color: red
     }
  }

}

Кто-нибудь может мне помочь? Заранее благодарим за ваше драгоценное время и усилия

Answer 1

Это S CSS Я бы написал для вашего случая:

.c-button {
  &#{&}--outlined {
     &.primary {
        color: yellow;
     }

     &.secondary {
        color: red
     }
  }
}

, который компилируется в

.c-button.c-button--outlined.primary {
  color: yellow;
}

.c-button.c-button--outlined.secondary {
  color: red;
}