css - タグを生成するための式として渡す calc mixin を作成するにはどうすればよいですか?

Question

calc要素を使用してコンテンツのサイズを動的に変更したいsassスタイルシートに取り組んでいます。要素が標準化されていないため、 、、およびcalcをターゲットにする必要があります。calc()-moz-calc()-webkit-calc()

またはとして設定できる必要なタグを生成するために、式を渡すことができる mixin または関数を作成する方法はありますwidthかheight?

Answer 1

これは引数を持つ基本的なmixin になります。ありがたいことに、式はサポートされているスコープ内でブラウザー固有ではありません。

@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 がサポートされていない場合のために、「デフォルト」値を含めることができます。

Answer 2

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

Answer 3

それを書く別の方法：

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

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

これはよりエレガントな方法だと思います。