121

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

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

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

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

証拠金は正の数に変換されます。私は何かが足りないのですか？

4

4 に答える 4

238

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

margin: 0 (-$pad) 20px (-$pad);
于 2012-11-08T19:44:32.930 に答える
42

sassガイドラインに従ったより適切な解決策interpolateは、次の例のような変数に対するものです。

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

例：https ：//www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

于 2017-12-27T10:41:39.627 に答える
6

前の2つの答えを考慮した後、2ペンスを追加していますが、これを読んでいます（私の強調）：

特に、のような補間の使用は避けて#{$number}pxください。これは実際には数字を作成しません！数値のように見える引用符で囲まれていない文字列を作成しますが、数値の演算や関数では機能しません。$number数学の単位を作成してみてください-すでに単位が含まれるようにクリーンにするpxか、を記述して$number * 1pxください。

ソース

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

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;
于 2020-01-08T11:58:14.173 に答える
1

関数を作成する

@function neg($val) {
  @return $val * -1
};

それから私はそれをこのように使います

$gutter: 30px;

.header {
  margin: $gutter neg($gutter);
}
于 2021-06-09T14:49:37.237 に答える