負の変数値をサスしますか?


107

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

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

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

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

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

回答:




2

私は前の2つの答えを検討した後で私の2ペンスを追加していますが、これを読んでいます(強調は私のものです):

特にのような補間の使用#{$number}px避けてください。これは実際には数を作成しません!数値のように引用符で囲まれていない文字列を作成しますが、数値の操作や関数では機能しません。計算ユニットをクリーンにして、$numberすでにユニットが存在するようにするpxか、または書き込み$number * 1pxます。

ソース

したがって、SASS / SCSSの数学的能力を維持する正しい方法は次のようになると思います。

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

一見したところ、それは一見したところ(あなたの答え)のようですが、一見すると、それは実際にはより良い答えです。結局のところ、変数が負の変数になった場合、答えは正になります!$ pad:-2rem; ...マージン:0-#{$ pad}; //マージンになります:0 --2rem; マージン:0 $ pad * -1; //マージンになります:0 2rem;
ノルディウス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.