CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに

CSS は、もっと楽になるLESS を活用してコーディング作業をシンプルに

増永 玲

・増永 玲（マスナガ | msng）といいます。

・Twitter の bot を作ってます。

・ウェブのサービスを作って運営するなどしています。

・ / msng

・『頭ん中』というブログを書いています。　http://www.msng.info/

嫌いなもの• 渋滞• ホシブドウ• 単純作業

本日のおはなし• CSS のここがめんどくさい• そこで LESS ですよ• LESS で何か書いてみよう• Bootstrap が便利• Bootstrap も LESS でできている• まとめ

CSS 書くの

面倒くさくないですか？

#header { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}#nav { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.post-title { -webkit-border-radius: -moz-border-radius: border-radius:}

.post-title { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}

何回書けば・・・

#content { float: left;}#content .post { margin-bottom: 20px;}#content .post .post-header { overflow: hidden;}#content .post .post-header .post-title { border-bottom: 1px solid #999;}#content .post .post-header .post-title p { font-size: 1.5em;}

どこまで伸びるの

#content a { color: #33F;}#content a:hover { color: #FFF; background-color: #33F;}#sidebar .nav-list a { color: #33F;}#sidebar .nav-list a:hover { color: #FFF; background-color: #33F;}

　　　やっぱリンク色変更で」

「あ、

面倒くさくないですか？

いきなりですが

解決方法

解決方法1. 書く

2. そもそも書かない

書く手間を減らす

書く手間を減らすstyle.less style.css

魔法の小箱 “LESS”

書く手間を減らす

•LESS ←今日はこれ

•Sass•Stylus

LESSのいいところ

黒い画面でコマンドを・・・！

•Sass•Stylus は

LESSのいいところ

JavaScript を読み込むだけLESS は

LESSでできること変数が使える

@nice-blue: #5B83AD;#header { color: @nice-blue; }#nav { color: @nice-blue; }

#header { color: #5B83AD; }#nav { color: #5B83AD; }

LESSでできること@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

#header { color: #6C94BE; }

LESSでできることミックスイン

.round { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

#header { .round; }#nav { .round; }

LESSでできること#header { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

#nav { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

実際にご覧ください（後記：ここで実演しました）

解決方法1. 　

2. 　

書く手間を減らす

そもそも書かない

そもそも書かない

Twitter Bootstrap

実際にご覧ください（後記：ここで実演しました）

本日のまとめ

•単純作業は機械に任せて•クリエイティブな活動に専念しよう

ありがとうございました。

参考資料 http://bit.ly/cno32