Webridge Meeting SP12 featuring Frontrend

あほむ｜副業転職 Offers の overflow @ahomu

#wmsp12 谷さんのスライドのフォントかわいい･･･

t32k @t32k

僕も書きますよー今年！CSS Preprocessor Advent Calendar 2012 http://t.co/MPlkAoLd　 #wmsp12

position: absolute; @pos___a

mixin解説中 #wmsp12

Webridge KAGAWA @webridge_kagawa

今日はWebridge Meeting SP12 featuring Frontrend（高松フロントエンド祭り）を開催しています！最初のセッションは谷 拓樹さんによるCSSプリプロセッサの取扱説明書 #wmsp12

position: absolute; @pos___a

if や else などのロジックが入れられる #wmsp12

position: absolute; @pos___a

lightness(色)で色の明度を取得する #wmsp12

position: absolute; @pos___a

メディアクエリもmixin #wmsp12

position: absolute; @pos___a

パーセンテージの計算のmixin #wmsp12

ymkwさん @yantona

最初のセッションでもう来て良かった感。おさらいが出来て嬉しい。 #wmsp12

position: absolute; @pos___a

パーセンテージの関数を利用すると計算の上、％で出力してくれる #wmsp12

Webridge KAGAWA @webridge_kagawa

CSSプリプロセッサは、Sass、LESS、Stylusの主に3種類。CodekitやなどのGUIツールもあり。今回はSassを中心に紹介。Sass入門（電子書籍） https://t.co/vabipsLX #wmsp12

Webridge KAGAWA @webridge_kagawa

SaSSのmixinについて。色の明度を判定、 メディアクエリの設定、パーセンテージの計算、each文を使った繰り返し処理など、プログラムのロジックをCSSに持ち込むことができる。 #wmsp12

position: absolute; @pos___a

each構文など 効率的に制作するためのいろいろが次々と #wmsp12

Webridge KAGAWA @webridge_kagawa

ミックスインの使い方は、ライブラリを参考にするといい。Sassの場合はBourbon http://t.co/taqXTpt3 、LESSの場合はLESShat http://t.co/Z9VjrmXH #wmsp12

position: absolute; @pos___a

mixinとextend #wmsp12

position: absolute; @pos___a

3.2からのplaceholderセレクター #wmsp12

position: absolute; @pos___a

使い方に気をつける点 #wmsp12

position: absolute; @pos___a

エディタの対応。特にコード補完など #wmsp12

Webridge KAGAWA @webridge_kagawa

ルールセットを継承するにはmixinのほかにextendを使うと、セレクタに要素をまとめられる。ルールセットを出力しない場合はplaceholderセレクタを使う。 #wmsp12

Hideki @_hideki_a

Placeholder Selectorsを使うと、スタイル定義をextendで使っていることが分かるのでいいなと思っている。 http://t.co/xJINMVB6 #wmsp12

position: absolute; @pos___a

複雑なmixinでメンテナンス性に問題が出る可能性がある #wmsp12

position: absolute; @pos___a

過剰なネストに注意 #wmsp12

position: absolute; @pos___a

IEの4095ルールに注意 #wmsp12

Yuya Saito @cssradar

IE9以下でのセレクタ数の制限について - http://t.co/wge0kr3a #wmsp12

Webridge KAGAWA @webridge_kagawa

CSSプリプロセッサのデメリット。エディタの対応、CSSの詳細度が高まってしまうのでオーバーライドできない、IE9以下で4095以上のルールセットがあると落ちてしまうバグがある。アウトプット後が困らないか、複雑過ぎないか。入れ子はやり過ぎないほうがいい。 #wmsp12