web-dev-qa-db-ja.com

SassのCSSプロパティに変数を使用する

要素のパーセンテージ幅を計算する数学を含む@mixinを作成していますが、非常に便利なので、マージンやパディングなどの他のプロパティにも同じ関数を使用したいと思います。

プロパティ名を引数としてミックスインに渡す方法はありますか？

@mixin w_fluid($property_name, $w_element,$w_parent:16) {
    $property_name: percentage(($w_element/$w_parent));
}
sassmixins
25
Laura Silvani

interpolation を使用する必要があります（例：#{$var}）SassがCSSプロパティとして扱うために、変数を使用します。それがなければ、変数の割り当てを実行しているだけです。

@mixin w_fluid($property_name, $w_element, $w_parent:16) {
    #{$property_name}: percentage(($w_element / $w_parent));
}
48
rcorbellini

@rcorbelliniの応答に加えて

文字列と変数を一緒に使用できます

@mixin margin($direction) { // element spacing

    margin-#{$direction}: 10px;

}
7
Julha