Почему не работают мои селекторы атрибутов?

Question

Я пытаюсь использовать несколько селекторов атрибутов, но мой код просто не работает, по крайней мере, в CodePen ...

Я много гуглил, но просто не могу найти решение.

Я написал их в SCSS:

*[class^="inset"] {
  &[class*="-t0"] {
    top: 0;
  }
  &[class*="-r0"] {
    right: 0;
  }
  &[class*="-b0"] {
    bottom: 0;
  }
  &[class*="-l0"] {
    left: 0;
  }
}

вот работающая демонстрация с скомпилированным CSS:

*[class^="inset"][class*="-t0"] {
  top: 0;
}
*[class^="inset"][class*="-r0"] {
  right: 0;
}
*[class^="inset"][class*="-b0"] {
  bottom: 0;
}
*[class^="inset"][class*="-l0"] {
  left: 0;
}

<button class="inset-t0">Button</button>

Answer 1

Подобный выбор означает, что в элементе есть два класса css, например

<button class="inset -t0"></button>

Вы можете просто сделать следующее:

.inset {
  &-t0 {
    top: 0;
  }
  &-r0 {
    right: 0;
  }
  &-b0 {
    bottom: 0;
  }
  &-l0 {
    left: 0;
  }
}

Answer 2

.inset {
  &-t0 {
    top: 0;
  }

  &-r0 {
    right: 0;
  }

  &-b0 {
     bottom: 0;
  }

  &-l0 {
    left: 0;
  }
}