RAX7

#navigation-top:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(-90deg);
}

#navigation-middle:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(0deg);
}

#navigation-bottom:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(90deg);
}

.coin__edge {
  transform-style: preserve-3d;
}

Это баг самой библиотеки, не получается у нее нормально распарсить значения filter: drop-shadow.
Исправить можно сделав анимацию в объект с последующим обновлением свойств самого элемента.

Потому что первый вариант компилтся в:

.promo .promo__wrapper {
  text-align: center;
}

а второй в:

.promo__wrapper {
  text-align: center;
}

css.yoksel.ru/specifity

Галочку в настройках убери и будет тебе sass

Попробуй менять не fill, а class.
Look at my horse, My horse is amazing! by RAX7

Может просто на flexbox сверстать?

https://developer.mozilla.org/ru/docs/Learn/CSS/CS...

Вот так попробуй https://jsfiddle.net/fco6gvau/

В общем вопрос в заголовке. можно как-то объединить tab и пробел в одно?

Можно привести все отступы к одному стилю: пробелами или табами.
Для этого правом нижнем углу кликнуть по "Tab Size: n" и выбрать "Convert Indentation to Spaces|Tabs"

sass-lang.com/documentation/file.SASS_REFERENCE.ht...
Вместо $property подставить #{$property}