Sass issue: конкатенирование элементов

У меня проблема с sass конкатенированием элементов. Я хочу, чтобы получить -webkit-известково быть написаны вместе, как это:Sass issue: конкатенирование элементов

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

Sass код:

$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});

источник

2015-10-01 Gabriel

Зачем использовать префиксы, когда [известково() не нуждаются в них] (http://caniuse.com/#feat=calc) для последних версий современные браузеры? – Vucko

Я нашел проблему, которая возникает на iPhone4 – Gabriel

Здесь недостаточно кода для воспроизведения проблемы. Нам нужно иметь возможность взять код как есть и скомпилировать его, чтобы получить точные результаты, которые вы видите (подсказка: если вы не можете воспроизвести его на [sassmeister] (http://sassmeister.com/), вы 'достаточно предоставить код). – cimmanon

-1

Я смог получить это, чтобы успешно скомпилировать с помощью узла-узла:

$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); 
}

The + в твоей изначальному вопросу излишни

источник

2015-10-01 13:00:49 JRulle

ОП не предоставил достаточно информации здесь.Они утверждают, что все вещи, которые они пробовали, не работают (подсказка: код, который вы написали, фактически появляется в OP, они утверждают: «И я пишу его таким образом, что результата не будет»). – cimmanon

Sass код:

@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); 
}

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

источник

2017-01-13 14:24:59

Sass issue: конкатенирование элементов

ответ

Смежные вопросы