How can I create a calc mixin to pass as an expression to generate tags?

问题:

I am working on a sass stylesheet in which I wish to use the calc element to dynamically size some content. As the calc element has not been standardized, I need to target calc(), -moz-calc(), and -webkit-calc().

Is there a way for me to create a mixin or function that I can pass an expression to so that it will generate the required tags that can then be set as a width or height?

回答1:

It would be a basic mixin with an argument, thankfully the expressions are not browser-specific within the supported scope:

@mixin calc($property, $expression) {   #{$property}: -webkit-calc(#{$expression});   #{$property}: calc(#{$expression}); }  .test {   @include calc(width, "25% - 1em"); } 

Will render as

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

You may want to include a "default" value for when calc is not supported.

回答2:

Compass offers a shared utility to add vendor prefixes for just such an occasion.

@import "compass/css3/shared";  $experimental-support-for-opera: true; // Optional, since it's off by default  .test {   @include experimental-value(width, calc(25% - 1em)); } 

回答3:

Using calc can be accomplised pretty easily using the unquote feature:

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

will render as:

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

You can also try creating the mixin as suggested above, but I do mine slightly different:

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

will render as:

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

回答4:

Another way to write it:

@mixin calc($prop, $val) {   @each $pre in -webkit-, -moz-, -o- {     #{$prop}: $pre + calc(#{$val});   }    #{$prop}: calc(#{$val}); }  .myClass {   @include calc(width, "25% - 1em"); } 

I think this is more elegant way.

文章来源: How can I create a calc mixin to pass as an expression to generate tags?