ラック
Home > ブログ > 記事 > 2016年1月 > Sassのミックスインが変数とcalcを引数に取ったら

Sassのミックスインが変数とcalcを引数に取ったら

カテゴリ: ホームページ

$webkit-prefix: -webkit-, '';

@mixin webkitCalc($name, $value) {
	@each $prefix in $webkit-prefix {
		#{$name}: #{$prefix}calc(#{$value});
	}
}

$header-margin: 60px;

@include webkitCalc(height, 90vh - $header-margin); //Sassが先に数式を処理してしまう。vhとpxの計算なのでコンパイルエラー
@include webkitCalc(height, "90vh - $header-margin"); //文字列として処理されてしまう → たぶん$header-marginが変換されない
@include webkitCalc(height, "90vh - "$header-margin); //これもダメ

上記のような場合、できないかなーと思ったのですができなさそうな気がしますね…。共通で使うパラメータなので変数で持っていたいのですが、ダメか…。

ダメそうですよね…。

タグ: css, Sass(Scss)

 



関連する記事一覧