【CSS】Sassの実践的な使い方 -HTML5カンファレンス等まとめ
先日慶応義塾大学で開催されたHTML5カンファレンスにてSassのセッションが
ありましたのでそちらの資料を基に現在の支流のやり方や自分が
考えているやり方をメモしていきます。
前回の記事はこちら
【CSS】5分で出来るデザイナー・コーダーのためのSassの超簡単導入・具体的な使用方法
参考書籍
Pragmatic Bookshelf
売り上げランキング: 185445
はじめに
HTML5のカンファレンスで登壇されていたNHNJapan社のMEをされている方がslideshareに挙げていたものが
参考になりますので紹介しておきます。
この方がPDFで見られるSassの資料作成されたそうですが、高いので買いませんでした笑
前回の【CSS】5分で出来るデザイナー・コーダーのためのSassの超簡単導入・具体的な使用方法の記事でSassをインストールしていただいて、下記の資料等みていただければある程度の実践的な知識は見につくのではないかと
思います。
実践Sass前編に見るSassの仕様
実践Sass後編に見るSassの仕様
下記を見ていただくと疑問に思うかもしれない箇所があります。
$fooを外側で定義して、.sampleAの中の$fooが10pxになるのはわかるかもしれませんが、
なんと.sampleBの中も10pxになるのですね。
グローバル変数とローカル変数的な使い方をされるのであれば、少し混乱してしまいそうです。
$foo: 5px;
.sampleA{
$foo: 10px;
margin: $foo;
}
.sampleB{
margin: $foo;
}
.sampleA{
$foo: 10px; // ここで＄fooが上書きされる。
margin: $foo;
}
.sampleA{
$foo: 10px;
margin: $foo;
}
$foo: 5px;
.sampleB{
margin: $foo; //5px
}
上を見ていただけるとわかる通り、$fooのグローバル変数の宣言位置によって
結果が変わってしまうようです。
なので、上のNHNの方はローカル変数には$_fooのような形にするようです。
@mixinの引数と、グローバル変数が同名の時干渉しあわない
これも上記同様、仕様によるものですが、上記スライドのP.97に書いてあるとおりとなっています。
Sass+OOCSS
個人的にはこの方のスライドがとても参考になっていて、また大規模な開発時のメンテナンスの工数を
考えるとOOCSSを絡めるのが運用等も考えると良いのではないかと考えています。
※HTMLの綺麗さ等を考えるとコーディングの宗教戦争になってしましますので、
その辺りはお任せします。社内に力を持っている方に…笑
下記では、semanticかどうかまで考えて、classを作成していたり細かい配慮まで書かれているので
非常に参考になります。
これまでだと、繰り返しで使いたい場合に重複してしまうか、別のclassを持たせなければいけなかったのが、
Sassの@mixinを使って、semanticなclassでかつ、HTMLも綺麗なコードになりますよね。という例です。
Sass+OOCSS
@mixin btnUI{
height:30px;
width:120px;
line-height:30px;
color: #fff;
border-radius: 10px;
border:1px solid #eee;
}
.blackBtn{
background:#000;
@extend .btnUI;
}
.glayBtn{
background:#EEE;
@extend .btnUI;
}
まとめ
NHN社の方も書かれておりますが、こういう社内用のライブラリみたいなものを作ろうとすると
時間とコストがかかりますよねー。はてなさんではLESSを社内標準にしているようですが。
ってことで最初はcompassを入れて、必要な機能だけを使って行くのがよいかもしれませんね。
または、その次で挙げた、Sass+OO.CSSを使った効率的なコーディングというのが
現状良さそうなのかな。
{}がない方が見やすいだとか、ネストが～とか、そのへんになってくると本当にコーディングの宗教戦争になってくるので
その辺りは各個人に任せたいと思います。
サイバーエージェント社の場合
サイバーエージェント社はstylusというCSSメタ言語を使用しているそうです。
スマートフォン版AmebaのCSSについて
新しいAmebaはnode.jsを採用しており、当初HTMLテンプレートの選定でexpressモジュールのデフォルトでも使われているJadeが候補となり、それと同時にCSSではStylusが挙がりました。
JadeとStylusは作者が同じexpressモジュールの開発者であるため、expressモジュールと相性がよく、記法が似ていてタブによる階層構造で記述するのが特徴
とのことです。※上記記事一部抜粋
参考スライド
こちらもOOCSSについてのスライド
SassとCompassについて
Sass,Compass,CSS3等について包括的に効率的なコーディング方法を書いてあるスライドこっちは必見！
個人的にはCompass + WordPressという箇所が勉強になりました。
こんなのもあるんですね！
参考書籍
上記の最後に紹介したスライドが詳しく書かれている洋書です。
買おうか迷うな…
Pragmatic Bookshelf
売り上げランキング: 185445