Проблема с Sass: объединение элементов

У меня проблема с sass, объединяющим элементы. Я хочу, чтобы -webkit-calc записывался вместе следующим образом:

width: -webkit-calc(100% - 6rem);
width: -moz-calc(100% - 6rem);
width: -o-calc(100% - 6rem);

Сасс-код:

$vendorlist: unquote("-webkit-") unquote("-moz-") unquote("-o-");
@mixin calcmixx($prop, $val) {
#{$prop}: calc(#{$val});
@each $pref in $vendorlist {
    #{$prop}:#{$pre} + calc(#{$val});
  }
}

Вот метод, используемый для включения миксина в файл sass:

.PromoTitle{ margin: 0 auto; @include calcmixx( width, '100% - 6rem');

Результат CSS:

.PromoTitle{
    width: calc(100% - 6rem);
    width: -webkit- +calc(100% - 6rem);
    width: -moz- +calc(100% - 6rem);
    width: -o- +calc(100% - 6rem);}

Если я попытаюсь написать без "+"

   #{$prop}:#{$pref} calc(#{$val});

Вот результат:

width: calc(100% - 6rem);
width: -webkit- calc(100% - 6rem);
width: -moz- calc(100% - 6rem);
width: -o- calc(100% - 6rem);

А если я пишу так, то результата не будет:

#{$prop}:#{$pref}calc(#{$val});

css sass vendor
person Gabriel    schedule 01.10.2015    source источник
comment
Зачем использовать префиксы, если calc() в них не нуждается для последних версий современных браузеров?   -  person Vucko    schedule 01.10.2015
comment
Я обнаружил проблему, которая возникает на iPhone4   -  person Gabriel    schedule 01.10.2015
comment
Здесь недостаточно кода, чтобы воспроизвести проблему. Нам нужно взять код как есть и скомпилировать его, чтобы получить точные результаты, которые вы видите (подсказка: если вы не можете воспроизвести его на sassmeister, вы предоставили недостаточно кода).   -  person cimmanon    schedule 01.10.2015
comment
Я добавил метод, который использовал для включения миксина.   -  person Gabriel    schedule 01.10.2015
comment
@Gabriel, кажется, работает в sassmeister?   -  person Vucko    schedule 01.10.2015
comment
да, на Sassmeister это работает....   -  person Gabriel    schedule 01.10.2015
comment
Один из вариантов, который у вас уже есть, работает. Если вы не можете найти способ предоставить достаточно информации для воспроизведения проблемы, этот вопрос будет закрыт.   -  person cimmanon    schedule 01.10.2015
comment
Проблема префикса поставщика уже решена. Есть ряд решений, которые просто работают. Зачем заново изобретать колесо, особенно когда речь идет о причудливом языке со странными символами, которые никто не может прочитать, написать или отладить?   -  person    schedule 01.10.2015

Ответы (2)


arrow_upward
0
arrow_downward

Сасс-код:

@mixin calcmixx($prop, $val) {
  @each $pref in -webkit-, -moz-, -o- {
    #{$prop}: $pref + calc(#{$val});
  } 
  #{$prop}: calc(#{$val});
}

Метод, используемый для включения миксина в файл sass:

.PromoTitle {
    margin: 0 auto;
    @include calcmixx(width, '100% - 6rem');
}

Он компилируется в:

.PromoTitle {
  margin: 0 auto;
  width: -webkit-calc(100% - 6rem);
  width: -moz-calc(100% - 6rem);
  width: -o-calc(100% - 6rem);
  width: calc(100% - 6rem);
}

"Список поставщиков" действительно не нужен

person Ben Kalsky    schedule 13.01.2017

arrow_upward
-1
arrow_downward

Я смог успешно скомпилировать это с помощью node-sass:

$vendorlist: -webkit-, -moz-, -o-;

@mixin calcmixx($prop, $val) {
  #{$prop}: calc(#{$val});
  @each $pref in $vendorlist {
    #{$prop}: #{$pref}calc(#{$val});
  }
}

.PromoTitle{
  margin: 0 auto;
  @include calcmixx(width, '100% - 6rem');
}

к этому:

.PromoTitle {
  margin: 0 auto;
  width: calc(100% - 6rem);
  width: -webkit-calc(100% - 6rem);
  width: -moz-calc(100% - 6rem);
  width: -o-calc(100% - 6rem); 
}

+ в исходном вопросе не нужны.

person JRulle    schedule 01.10.2015
comment
ОП не предоставил здесь достаточно информации. Они утверждают, что все, что они пробовали, не работает (подсказка: код, который вы написали, действительно появляется в ОП, они утверждают, что если я напишу его таким образом, результата не будет). - person cimmanon; 01.10.2015