CSS

Sassで横幅自動計算mixinを作る!レスポンシブコーディングで使おう!!

みんなはSassでコーディングしてますか?
昔はCSSで書いてたけど、最近はもっぱらSass。
今回はSassでレスポンシブコーディングに使える横幅を%で自動で計算するmixinを作ったので公開するよ!
(pxを%に簡単に変換する方法を紹介)

 

Sassで横幅自動計算mixinを作る

便利なSass!
早速始めるよ。

計算式について

横幅をpxから%に変換するには下記の計算を使用します。

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

これで横幅を%で求めることができるよ!
では、早速Sassのmixinで書いてみよう。

 

 

Sass「横幅自動計算mixin」

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

 

 

使用方法

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

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

 

 

Sass「横幅自動計算mixin」の出力結果

.sample{
    width: 93.75%;
}

 

 

こんな感じで出力されるよ!
Sassで管理されているからデザイン変更で幅が変わっても電卓などで計算する必要がないのは便利なところ。

 

Sassで楽にコーディングしよう♪

 

 

お仕事・ご依頼募集中!!

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について