web-dev-qa-db-ja.com

Sassの負の変数値?

次のように、正と負の同じ量を使用するscssセレクターがいくつかあります。

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

15pxのすべての量に変数を使用したいのですが、これは機能しません:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

マージン金額は正の数値に変換されます。何か不足していますか?

91
Steve

このようにしてみてください

margin: 0 (-$pad) 20px (-$pad);
193
Zoltan Toth

Sassガイドラインによるより健全な解決策は、次の例のようなinterpolate変数にすることです。

margin: 0 -#{$pad} 20px -#{$pad};

例: https://www.sassmeister.com/Gist/c9c0208ada0eb1fdd63ae4783091729

18
Vangel Tzo