CSS

レスポンシブコーディングで使える!横幅自動計算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でコーディングしてる方は使ってみてね!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)