Как вложить этот s css так, чтобы он все еще функционировал как ожидалось

Question

У меня есть css файл, который мне нужно зарегистрировать, вложив некоторые из этих свойств, я попытался вложить их, но свойства, кажется, не работают, когда я их вкладываю. Мне просто интересно, есть ли правильный способ сделать это, спасибо заранее!

Вот как это работает в данный момент:

input~.checked-icon {
  color: $primary-color;
  background-color: transparent;
  &:hover {
    background-color: transparent;
  }
}

input:disabled~.checked-icon {
  color: $disabled-color;
}

Это то, что я пробовал :

input~.checked-icon {
  color: $primary-color;
  background-color: transparent;
  &:hover {
    background-color: transparent;
  }
  &:disabled {
    color: $disabled-color;
  }
}

Answer 1

Ваше текущее решение создает селектор, который выглядит следующим образом:

input ~ .checked-icon:disabled {
  color: $disabled-color;
}

, где :disabled применяется к .checked-icon.

Требуется дополнительное правило :disabled для применения к input, поэтому вы хотите использовать:

input {

  &~.checked-icon {
    color: $primary-color;
    background-color: transparent;
    
    &:hover {
      background-color: transparent;
    }
  }
  
  &:disabled~.checked-icon {
    color: $disabled-color;
  }
}

Имейте в виду, что существует множество полезных онлайн-инструментов для игры с Sass и просмотра скомпилированного кода. Как Зассмейстер .