web-dev-qa-db-ja.com

負のCSSカスタムプロパティの使用

SASSのようなプリプロセッサでは、次のような負の値を使用できます。

$margin-md: 10px;

.class {
  margin-bottom: -$margin-md;
}

カスタムプロパティを使用してこれを行うにはどうすればよいですか？

// This doesn't work
.class {
  margin-bottom: -var(--margin-md);
}
csscss-variables
17
BHOLT

2018年3月のこの投稿の時点で、負のカスタムプロパティを使用する唯一の方法は、それを-1に calc 関数で乗算することです。

// Vanilla CSS
.class {
  margin-bottom: calc(var(--margin-md) * -1);
}

カスタムプロパティを持つプリプロセッサを使用している場合は、calc関数内でカスタムプロパティをエスケープする必要があります。

// SASS
.class {
  margin-bottom: calc(#{var(--margin-md)} * -1);
}
40
BHOLT