sassでマージンやパディングを簡単に指定できるクラスの作り方

[`brogumura` not found]

こんにちは Andy(あんでぃ〜)です。

今日はsassの話題です。

例えばある要素の上部マージンを20px取るためだけのクラスを

というように定義するとき、5pxのときも、10pxのときも同じように使おうとすると。。

となりますが、これを50pxのときも、はたまた42pxもなど、細かい単位でも使おうとすると似たような記載が延々と増えていってしまいますね・・・

 

これはコピペを多用したとしても作業時間は伸びるは、うっかりミスでスペルミスなんかやらかした際は後々なんでここだけスタイル適用されないんだ?

なんで悩んで時間を食うこと必須です。

 

そこでscssを使って効率的にコーディングしちゃいましょう!!

sass,scssではfor文が使えます。

上記のようなマージンを5px刻みに指定するような場合、

というようにするとマージン0から50まであっという間に対応できます

 

使用例

こういうようにクラス名によってでマージンやフォントカラー、フォントサイズなどをつけていく手法は中規模〜大規模サイトの制作にはあまり向きませんが、キャンペーンサイトやランディングページのコーディングでよく使います。

覚えていて損はないと思います。

 

それではまた次回

Please follow and like us:
20

andy

プログラマ、フロントエンドエンジニアです。 1988年生まれ Java(JavaEE,JavaFX,Android),Javascript,TypeScript,Angularjs,Backbone.jsなど使っています フリーランスです。 ご相談お待ちしております。 GitHub github.com/kotaroyamame *イラスト制作moom

コメントを残す

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

*