私はcalc
要素を使用してコンテンツのサイズを動的に変更したいsassスタイルシートに取り組んでいます。 calc
要素は標準化されていないため、calc()
、-moz-calc()
、および-webkit-calc()
をターゲットにする必要があります。
式を渡すことができるミックスインまたは関数を作成して、width
またはheight
として設定できる必要なタグを生成する方法はありますか?
基本的な mixin with argument になりますが、ありがたいことに、サポートされているスコープ内のブラウザ固有の表現ではありません。
@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);
}
Calcがサポートされていない場合の「デフォルト」値を含めることができます。
Compassは 共有ユーティリティ を提供して、まさにそのような場合にベンダープレフィックスを追加します。
@import "compass/css3/shared";
$experimental-support-for-opera: true; // Optional, since it's off by default
.test {
@include experimental-value(width, calc(25% - 1em));
}
Calcの使用は、引用解除機能を使用して非常に簡単に実行できます。
$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);
上記のようにmixinを作成してみることもできますが、私は少し違います。
$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);
}
別の書き方:
@mixin calc($prop, $val) {
@each $pre in -webkit-, -moz-, -o- {
#{$prop}: $pre + calc(#{$val});
}
#{$prop}: calc(#{$val});
}
.myClass {
@include calc(width, "25% - 1em");
}
これはもっとエレガントな方法だと思います。