¿Cómo puedo crear una mezcla de cálculo para pasar como una expresión para generar etiquetas?

Question

Estoy trabajando en una hoja de estilo sass en la que deseo utilizar el elemento calc para dimensionar de forma dinámica algunos contenidos. Como el elemento calc no se ha estandarizado, debo apuntar a calc(), -moz-calc() y -webkit-calc().

¿Hay alguna manera de crear una mixin o función a la que pueda pasar una expresión para que genere las etiquetas necesarias que luego se pueden establecer como width o height?

Answer 1

Sería un básico mixin with an argument, por suerte las expresiones no son específicas del navegador dentro del ámbito apoyado:

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

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

rendirá como

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

es posible que desee incluir una " valor predeterminado "para cuando calc no es compatible.

Answer 2

Brújula ofrece a shared utility para agregar prefijos de vendedor para tal ocasión.

@import "compass/css3/shared"; 

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

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

Answer 3

Usando Calc puede accomplised con bastante facilidad utilizando la función de fin de la cita:

$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)") 

rendirá como:

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

También puede intentar crear el mixin como se sugirió anteriormente, pero hacer la mía ligeramente diferente:

$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%) 

rendirá como:

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

Answer 4

Otra forma de escribirlo:

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

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

Creo que esta es la forma más elegante.