Upload
masunaga-ray
View
623
Download
4
Embed Size (px)
DESCRIPTION
CSS Nite in OSAKA, Vol.32 でやったやつです。
Citation preview
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