ラック
Home > ブログ > 記事 > 2018年12月 > Scssとcss3のcalcの併用

Scssとcss3のcalcの併用

カテゴリ: ホームページ

以前Sassのミックスインが変数とcalcを引数に取ったらという記事でScssとcalcの併用を試行錯誤していたのですが、それに対する解が。

この記事。冒頭の記事とはミックスインを使用しているか否かで状況が異なっていますが、今となってはベンダープレフィックスはautoprefixerを使用するので自分では書かなくなっており、そのためのミックスインを省くことで構造自体がシンプルになっています。

$header-margin: 60px;
height: calc(90vh - #{$header-margin}); //変数を #{} でくくることでScssのコンパイル時に計算するのではなく、css3のcalcへ持ち越しする

こんなシンプルに。こういう地味なところでもできなかったことができるようになったことはうれしいですね。

ところで。

去年の7月に上記のQiitaの記事見付けてるのにそのときは気付いていなかったじゃないですかヤダー!

タグ: css,Sass(Scss)

 



関連する記事一覧