Scssの変数をcalcで使う

最新のCSS3の calc()は、動的な計算ができる便利な関数だ。
一方、Scss(sass)の変数と計算式では静的な計算しかできない為、これらを組み合わせて使いたい時がある。
例えば次のような場合。

$m: 10px;
width: calc(100% - ($m * 2));
margin: 0 $m;


一見これは上手く行きそうだが、出力結果はこうなってしまう。

width: calc(100% - ($m * 2));
margin: 0 10px;


(´・ω・`)…
そこで、インターポレーションを使って、こうする。

width: calc(100% - #{$m*2});

結果は、

width: calc(100% - 20px);

ブラボー!Scss+calcって素晴らしいですね(`・ω・´)
もっともこの例だと width: auto;でも良いんですけどね!

テーマ: HTML - ジャンル: コンピュータ

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://itpc.blog87.fc2.com/tb.php/162-6de64b6f
この記事にトラックバック(FC2ブログユーザ用)