[解決済み] CSS calc()関数内のSass変数
2022-03-18 19:32:43
質問
を使おうとしているのですが
calc()
関数を使用することができますが、いくつかの問題があります。以下は私のコードです。
$body_padding: 50px
body
padding-top: $body_padding
height: calc(100% - $body_padding)
もし、リテラル
50px
の代わりに
body_padding
という変数があれば、まさに私が望むものが得られる。しかし、変数に切り替えると、このような出力になります。
body {
padding-top: 50px;
height: calc(100% - $body_padding);
}
の中の変数を置き換える必要があることを Sass に認識させるにはどうすればよいですか?
calc
関数を使用できますか?
どのように解決するのですか?
インターポレート :
body
height: calc(100% - #{$body_padding})
今回の場合 ボーダーボックス で十分です。
body
box-sizing: border-box
height: 100%
padding-top: $body_padding
関連
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[CSSチュートリアル】cssフレックスレイアウト ロング自動改行サンプルコード
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
cssで背景色の半透明化を実現する2つの方法
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[CSSチュートリアル】CSSのシングルDivの描画スキル
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード
-
[css3]CSS3は本当にSCSSに取って代わるのだろうか?