CSS の `calc()` 関数内で Sass 変数を使用するにはどうすればよいですか?

CSS calc() 関数の Sass 変数補間を理解する

コードでは、Sass の calc() 関数を使用しています。これにより、次の動的な計算が可能になります。 CSS 値。ただし、calc() 関数内で Sass 変数を利用しようとすると問題が発生します。この記事では、この問題の解決策を詳しく説明します。

Sass 変数の補間

calc() 関数が Sass 変数を正しく解釈できるようにするには、変数内で変数を補間する必要があります。機能。補間とは、変数の値をコードに挿入することを意味します。 Sass では、変数名を #{} で囲むことでこれを実現できます。

改訂されたコード

これは、calc 内で $body_padding 変数を補間する改訂されたコードです。 () 関数:

body {
  height: calc(100% - #{$body_padding}); // Interpolation
}

変数を補間することで、Sass はその変数を評価します。

代替アプローチ: border-box を使用する

この状況を処理する代替アプローチ要素の box-sizing プロパティを border-box に設定することです。これにより、高さの計算に 100% の値内のパディングが含まれることが保証されます。

border-box を使用したコードの改訂

body {
  box-sizing: border-box;
  height: 100%; // 100% includes the padding
  padding-top: $body_padding;
}

以上がCSS の `calc()` 関数内で Sass 変数を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。