Какое правильное значение CSS следует поставить после "...- # {$ property} :?"

Question

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

@mixin prefix($property, $value) {
  #{$property}: #{$value};
}

@mixin transition($transition: 0.1s all) {
  @include prefix('transition', #{$transition});
}

@mixin transform($transform: 0.1s all) {
  @include prefix('transform', #{$transform});
}

@mixin transform-origin($top: 0, $left: 0) {
  -webkit-transform-origin: $top $left;
          transform-origin: $top $left;
}

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