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

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

増永玲

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

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

・Twitter の bot を作ってます。

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

・ / msng

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

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

CSS 書くの

面倒くさく
ないですか？

#header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#nav {
}
.post-title {
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のいいところ

LESS は
JavaScript を読み込むだけ

LESSでできること
変数が使える
@nice-blue: #5B83AD;
#header { color: @nice-blue; }
#nav { color: @nice-blue; }

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

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

#header { color: #6C94BE; }

ミックスイン

.round {
}

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

#header {
}

#nav {
}

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

解決方法
1. 書く手間を減らす

2. そもそも書かない

そもそも書かない

Twitter Bootstrap

本日のまとめ

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

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

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

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

More Related Content

What's hot

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

Recently uploaded

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