レスポンシブコーディングで使える!横幅自動計算mixinスニペット

レスポンシブコーディングでよく使うであろうpxを%に変換する方法。
今までは計算してくれるサイトで計算してCSSに入力していましたが、そのサイトが404でページが無くなってしまいました。
そこでSassのmixinで横幅を自動計算してくれるmixinスニペットを作りました。
(そもそもwebツールで計算してCSSに書くのもめんどくさかったよね(笑))

 

ということで早速書いていきます!

Sassで横幅自動計算mixinスニペット

計算式について

横幅をpxから%に変換するには下記の計算で可能です。

600(指定する横幅) ÷ 640(親要素の横幅) × 100 = 93.75%(指定する横幅の%)

これを踏まえ、mixinを書きます。

 

 

横幅自動計算mixinスニペット

@mixin contentsW( $parentWidth, $mainWidth ){
    width: floor((( $mainWidth / $parentWidth ) * 10000% )) / 100;
}

 

使用方法

.sample{
    @include contentsW(640, 600);
}

 

先に親要素の横幅、あとに指定する横幅を入力します。

 

 

出力結果

.sample{
    width: 93.75%;
}

 

てな感じです。
Sassでコーディングしてる方は使ってみてね!

コメント

タイトルとURLをコピーしました