実践的なSASSの便利な使い方
SASSに限らず世の中には色々便利なものが出回っています。どこにどれをチョイスすればいいの？って迷ってしまうことも多いです。でも結局のところツールが良くなろうと使う側がどう便利に使うかですよね！そんなわけでSASSの便利な使い方です。
サイズを変数で管理する
レイアウトのサイズを変数で管理します。サイズ変更が簡単にできると色んなサイトにCSSを使い回せます。
|
1 2 3 4 5 |
$ww:980px;//全体の横幅 $mw:700px;//メインコンテンツの横幅 $sbw:240px;//サイドバーの横幅 $mf:right;//メインコンテンツのフロート $sf:left;//サイドバーのフロート |
mixinでフォントサイズを管理する
フォントサイズのパーセント指定。僕はなかなか覚えられませんのでmixinに登録しています。
|
1 2 3 4 5 6 7 8 9 10 11 |
@mixin f10{font-size:77%;}//名前がピクセルのフォントサイズ @mixin f11{font-size:85%;} @mixin f12{font-size:93%;} @mixin f13{font-size:100%;} @mixin f14{font-size:108%;} @mixin f16{font-size:123.1%;} @mixin f18{font-size:138.5%;} @mixin f20{font-size:153.9%;} @mixin f24{font-size:182%;} @mixin f26{font-size:197%;} @mixin f30{font-size:232%;} |
mixinでレイアウトを管理する
レイアウトをミックスインで管理します。mixinの記述はcssに反映されないのでそのサイトで使わないmixinを記述していてもCSSに無駄なソースを吐き出しません。 レイアウトのmixinを蓄積することにより様々なレイアウトが簡単に呼び出せます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
@mixin wrapper{ width:$ww; margin:0 auto; } @mixin main{ width:$mw; float:$mf; } @mixin sidebar{ width:$sbw; float:$sf; } @mixin inner{ $bw:1px; $pd:10px; $ma:0; border:1px solid #ddd; width:$mw - ($bw * 2) - ($pd * 2) ($ma); padding:$pd; } //////////////////////////////////////////////// .article{ @include wrapper; } .gnav{ ul{ @include clearfix; li{ @include inline-block; @include f12; } } } .section{ @include main; } .nav{ @include sidebar; } .inner{ @include inner; @include clearfix; ul{ li{ @include inline-block; } } } |
コンパイルすると
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.article { width: 980px; margin: 0 auto; } .gnav ul { overflow: hidden; *zoom: 1; } .gnav ul li { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; font-size: 93%; } .section { width: 700px; float: right; } .nav { width: 240px; float: left; } .inner { border: 1px solid #ddd; width: 678px 0; padding: 10px; overflow: hidden; *zoom: 1; } .inner ul li { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } |
SASSのコメントはCSSに反映されないので分りやすくコメントを記述できるのもメリットです。SASSは使えば使うほどmixinが蓄積されて便利になります。 Webサイトもデザイン的なアプローチが変化してきていて、フォーマットを作るのが難しくなってきていますが、定番的な作りが全くなくなったわけではありませんので是非ご活用を！
- 2013年11月14日木曜日
- ：Naruhiko Wakai
comments