Как я могу создать кальцин mixin для передачи в качестве выражения для генерации тегов?

Я работаю над таблицей стилей Sass, в которой я хочу использоватьcalc элемент для динамического определения размера содержимого. Какcalc элемент не был стандартизирован, мне нужно нацелитьсяcalc(), -moz-calc(), а также-webkit-calc().

Есть ли способ для меня, чтобы создать миксин или функцию, в которую я могу передать выражение, чтобы он сгенерировал необходимые теги, которые затем могут быть установлены какwidth или жеheight?

Ответы на вопрос(4)

Еще один способ написать это:

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

.myClass {
  @include calc(width, "25% - 1em");
}

Я думаю, что это более элегантный способ.

Решение Вопроса

Это было бы основнымсмешивать с аргументомК счастью, выражения не зависят от браузера в поддерживаемой области:

@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

.test {
  @include calc(width, "25% - 1em");
}

Будет отображаться как

.test {
  width: -webkit-calc(25% - 1em);
  width: calc(25% - 1em);
}

Вы можете включить & quot; по умолчанию & quot; значение для когда calc не поддерживается.

Использование calc может быть легко реализовано с помощью функции unquote:

$variable: 100%
height: $variable //for browsers that don't support the calc function  
height:unquote("-moz-calc(")$variable unquote("+ 44px)")
height:unquote("-o-calc(")$variable unquote("+ 44px)")
height:unquote("-webkit-calc(")$variable unquote("+ 44px)")   
height:unquote("calc(")$variable unquote("+ 44px)")

будет отображаться как:

height: 100%;
height: -moz-calc( 100% + 44px);
height: -o-calc( 100% + 44px);
height: -webkit-calc( 100% + 44px);
height: calc( 100% + 44px);

Вы также можете попробовать создать миксин, как предложено выше, но я делаю немного иначе:

$var1: 1
$var2: $var1 * 100%
@mixin calc($property, $variable, $operation, $value, $fallback)
 #{$property}: $fallback //for browsers that don't support calc function
 #{$property}: -mox-calc(#{$variable} #{$operation} #{$value})
 #{$property}: -o-calc(#{$variable} #{$operation} #{$value})
 #{$property}: -webkit-calc(#{$variable} #{$operation} #{$value})
 #{$property}: calc(#{$variable} #{$operation} #{$value})

.item     
 @include calc(height, $var1 / $var2, "+", 44px, $var1 / $var2 - 2%)

будет отображаться как:

.item {
height: 98%;
height: -mox-calc(100% + 44px);
height: -o-calc(100% + 44px);
height: -webkit-calc(100% + 44px);
height: calc(100% + 44px);
}

Компас предлагаетобщая утилита добавить префиксы вендора как раз для такого случая.

@import "compass/css3/shared";

$experimental-support-for-opera: true; // Optional, since it's off by default

.test {
  @include experimental-value(width, calc(25% - 1em));
}

Ваш ответ на вопрос