SASS не работает должным образом.Попытка установить префиксы для значений свойства css

Question

Боже, я пробовал это

@mixin prefix($property, $value){

    #{$property}: -webkit-#{$value};
    #{$property}:  -moz-#{$value};
    #{$property}: #{$value};
}

, но я получил это, когда использовал это @include prefix(display, border-box)

  display: -webkit- border-box;
  display: -moz- border-box;
  display: border-box; 

Между префиксом и значением css есть раздражающий пробел.Как от этого избавиться?Спасибо заранее!

Answer 1

Использование вашего кода и просто замена суффикса на префикс отлично работает для меня. Это текстовая строка, которую я вставил в генератор Sass Try Online .

@mixin prefix($property, $value){

    #{$property}: -webkit-#{$value};
    #{$property}:  -moz-#{$value};
    #{$property}: #{$value};
}

h2 {
    @include prefix(display, border-box)
}

Вывод был похож на следующий код:

h2 {
  display: -webkit-border-box;
  display: -moz-border-box;
  display: border-box; }

Answer 2

Попробуйте:

@include prefix(display,border-box); //Note there is no white space before border-box argument

В справочнике Sass:

CSS определяет два типа строк: строки с кавычками, такие как "Lucida Grande" или "http://sass -lang.com ', а также без кавычек, например, без засечек или жирным шрифтом.SassScript распознает оба вида, и, как правило, если в документе Sass используется строка одного типа, такая строка будет использоваться в полученном CSS.

Sass использует тот пробел, который вы написали ранееваш аргументСледующее должно работать тоже:

@include prefix(display, "border-box");