Downloaded 15 times
Uploaded byMasunaga Ray
590 views
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS Nite in OSAKA, Vol.32 でやったやつです。
Recommended
More Related Content
What's hot
Similar to CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
- 1.
- 2.・増永 玲（マスナガ ¦msng）といいます。・ウェブのサービスを作って運営するなどしています。・Twitter の bot を作ってます。・『頭ん中』というブログを書いています。 http://www.msng.info/・ / msng
- 3.
- 4.本日のおはなし•CSS のここがめんどくさい• そこで LESS ですよ• LESS で何か書いてみよう• Bootstrap が便利• Bootstrap も LESS でできている• まとめ
- 5.
- 6.#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: 8px; -moz-border-radius: 8px; border-radius: 8px;}
- 7.
- 8.#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;}
- 9.
- 10.#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;}
- 11.
- 12.
- 13.
- 14.解決方法1. 書く手間を減らす 書く2. そもそも書かない
- 15.書く手間を減らすstyle.lessstyle.css 魔法の小箱 LESS
- 16.書く手間を減らす • LESS←今日はこれ • Sass • Stylus
- 17.LESSのいいところ• Sass は•Stylus 黒い画面でコマンドを・・・！
- 18.
- 19.LESSでできること 変数が使える@nice-blue: #5B83AD;#header { color: @nice-blue; }#nav { color: @nice-blue; }#header { color: #5B83AD; }#nav { color: #5B83AD; }
- 20.LESSでできること@nice-blue: #5B83AD;@light-blue: @nice-blue+ #111;#header { color: @light-blue; }#header { color: #6C94BE; }
- 21.LESSでできること ミックスイン .round { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #header { .round; } #nav { .round; }
- 22.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; }
- 23.
- 24.解決方法1. 書く手間を減らす 2. そもそも書かない
- 25.
- 26.
- 27.
- 28.