css - 変数値を負にする

Question

変数を負にする方法を見つけようとしています。right: calc(0-var(--skyve-bredde));少し試してみましたがうまくいきませんでした。これは変数です:

#drawer, #burger{
    --skyve-lengde:50%;
}

値はrightおよびwidth属性で使用されます。どんな助けでも大歓迎です、ありがとう。

score 6 · Accepted Answer

問題のコードが機能しない理由: (引用されたテキスト内のすべての強調は私のものです)

right: calc(0-var(--skyve-bredde));

上記は2つの理由で機能しません。それらは次のとおりです。

CSScalc()構文に従って、+ または - 演算子の前後にスペースが必要です。

さらに、+ 演算子と - 演算子の両側に空白が必要です。( * および / 演算子は、周囲に空白なしで使用できます。)
CSS calc の型チェックによると、0 は a で<number>あり、他の値は<percentage>です。、などのwidthプロパティの場合、は型を取るため、以下のチェックは (値が同じ型ではないため) 失敗し、式は無効として扱われます。leftright<percentage><length>

+ または - で、両側が同じ型であること、または片側が <number> でもう一方が <integer> であることを確認します。両側が同じタイプの場合、そのタイプに解決します。一方が <number> で、もう一方が <integer> の場合は、<number> に解決されます。

演算子が上記のチェックに合格しない場合、式は無効です。

ソリューション:

:root {
  --skyve-bredde: 50%;
}
div {
  position: absolute;
  right: calc(0% - var(--skyve-bredde));
  background: red;
}

<div>Some text</div>

変数の前に否定記号を追加する:

仕様に関する私の理解が正しい場合、これは機能しません。例 11 の 2 番目のコードブロックと説明を参照してください。それによると-var(--skyve-bredde)、- 50%有効な値ではないため、無効なプロパティ値エラーが発生します。

:root {
  --skyve-bredde: 50%;
}
div {
  position: absolute;
  right: -var(--skyve-bredde);
  background: red;
}

<div>Some text</div>

2 に答える 2