1. WordBench Nagoya 5月
LESSをがんばって使ってみた
熊上 隆
オーサリングツールはNetBeansを使っています。

2. 自己紹介
熊上 隆（くまがみ たかし）
・某企業所属 Webディレクター
（6月末に退職予定）
・WordPressスキルは下の中～下の上くらい
・WBNは2012年3月より参加中
・一応、WBNのFacebook・Twitter中の人
Twitter：@imagamuk
Facebook：https://www.facebook.com/takashi.kumagami
Blog：http://kumamimumemo.info/

3. LESSをがんばって使ってみた
■LESSってなんぞ？
■基本導入
■こんなこともできまふ

4. LESSをがんばって使ってみた
■LESSってなんぞ？
■基本導入
■こんなこともできまふ

5. LESSってなんぞ？
The dynamic styleseet language
「LESSは変数、ミックスイン、演算、そして関数の
ような動的な処理をCSSに追加拡張できます」
（http://less-ja.studiomohawk.com/ ）
・変数 ・ミックスイン（Mixin）
・入れ子 ・関数と演算

6. LESSってなんぞ？
■変数
変数を定義して、当て込むような記述ができます。
//書き方
@kuma: #999999;
#header {
background: @kuma;
}
//コンパイル後
#header {
background: #999999;
}

7. LESSってなんぞ？
■ミックスイン
クラス名をプロパティっぽく書いて、他のプロパティに
埋め込む。
//コンパイル後
.hako {
border: 1px #666666 solid;
background: #999999;
}
.txt_area {
border: 1px #666666 solid;
background: #999999;
……
}
//書き方
.hako {
border: 1px #666666 solid;
background: #999999;
}
.txt_area {
.hako;
……
}

8. LESSってなんぞ？
■入れ子
セレクタの中にセレクタを入れて、継承を指定。
//書き方
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decolation: none;
&:hover {
border-width: 1px;
}
}
}
}
//コンパイル後
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decolation: none;
}
#header p a:hover {
border-width: 1px;
}

9. LESSってなんぞ？
■関数と演算
演算したり関数計算させたりすることができる。
//書き方
@the-border: 1px;
@base-color: #111111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
//コンパイル後
#header {
color: #333333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
※desaturate・・・彩度を低くする saturate・・・彩度を高くする
→カラー関数

10. LESSってなんぞ？
■関数と演算（カラー関数）
◎desaturate・・・彩度を低くする saturate・・・彩度を高くする
#footer {
border-color: desaturate(@red, 10%);
}
@redより10％彩度を低くして表示、という意味。
◎spin・・・色相を変える
#header {
border-color: spin(@red, 10);
}
@redから色相を10度ずらして表示、という意味。
※spin関数は、逆の角度に向かいたいときはマイナス値を指定してあげます。
◎darken・・・明度を低くする lighten・・・明度を高くする
#header {
border-color: darken(@base-color, 20%);
}
@base-colorより20％明度を低くして表示、という意味。

11. LESSってなんぞ？
■関数と演算（カラー関数）
◎fadein・・・透明度を減らす fadeout・・・透明度を増やす
@base-color: rgba(204, 65, 30, 0.5);
#header {
background: fadein(@base-color, 20%);
}
@base-colorより透明度を20％減らして表示、という意味。
◎fade・・・透明化させる
@base-color:#330000;
#header {
background: fade(@base-color, 20%);
}
@base-colorを20％透明化の状態で表示、という意味。
◎hue/saturation/lightness/alpha・・・色を取得する
hue(@color) とか saturation(@color)とか記述して使います。

12. LESSってなんぞ？
■関数と演算（Math関数）
◎round(数値)・・・四捨五入 ceil(数値)・・・切り上げ
floor(数値)・・・切り捨て percentage(数値)・・・％に表示切り替え
@suuji: 0.2;
@base-color: rgba(204, 65, 30, 0.5);
#header {
background: fadein(@base-color, percentage(@suuji));
}

13. LESSをがんばって使ってみた
■LESSってなんぞ？
■基本導入
■こんなこともできまふ

14. 基本導入
①.lessスタイルシートへのリンク（と、拡張子変更）
<link rel=“stylesheet/less” type=“text/css” href=“styles.less”>
②less.jsへのリンク
<script type=“text/javascript” src=“less.js”>
※注意事項※
必ず①、②の順番で記述する。
導入おわり～。

15. LESSをがんばって使ってみた
■LESSってなんぞ？
■基本導入
■こんなこともできまふ

16. ①ウォッチモード
ブラウザ上のURLのお尻に#!watchとつけてあげて、一度更新。
その後、LESSファイルを更新して保存すると・・・
更新（F5とか）をしなくても、勝手にLESSの変更内容が表示さ
れるようになります。
※HTMLファイルを編集した場合は更新が必要です。

17. !!!!Warning!!!!
だんだん
難しくなってきます
ナ、ナンダッテー！

18. ②変数を使って変数を定義
変数を使って、別の変数を定義してあげることができます。
//コンパイル後
#header { color:#6c94be; }
//書き方
@blue: #5b83ad;
@light-blue: @blue + #111111;
#header { color: @light-blue; }
//コンパイル後
#header {
content: ‘bizvektor’;
}
//書き方
@muryo-theme: ‘bizvektor’;
@hya-hho-: ‘muryo-theme’;
#header {
content: @@hya-hho-;
}

19. ③ミックスインと引数
ミックスインに引数を持たせて、関数のように扱うことができま
す。
//コンパイル後
#header {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
}
#footer {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
}
//書き方
.kadomaru(@kuma: 5px) {
border-radius: @kuma;
-moz-border-radius: @kuma;
-webkit-border-radius: @kuma;
-ms-border-radius: @kuma;
}
#header {
.kadomaru;
}
#footer {
.kadomaru(10px);
}

20. ③ミックスインと引数
//コンパイル後
.box-shadow2 {
box-shadow: box-shadow(2px 5px
10px 12px #888);
-moz-box-shadow: box-shadow(2px
5px 10px 12px #888);
-webkit-box-shadow: box-
shadow(2px 5px 10px 12px #888);
background: #aacccc;
width: 300px;
height: 100px;
}
//書き方
.box-shadow (@arg) {
box-shadow: @arg;
-moz-box-shadow: @arg;
-webkit-box-shadow: @arg;
background: #aacccc;
width: 300px;
height: 100px;
}
.box-shadow2 {
.box-shadow(2px 5px 10px 12px #888);
}
※ .box-shadow (@x:0,@y:0,@blur:10px,@color: #000) { …… と書く記述方法もあるが、blurの値が調整できない。

21. ③ミックスインと引数
ミックスインの第1引数に、条件っぽいものを設定することがで
きます。
//コンパイル後
.boxbg {
background: #666666;
display: block;
}
// ※@switchの値を「dark」にした場合
.boxbg {
color: #666666;
display: block;
}
// @_は、どの条件にもあてはまる、の意味。
//書き方
.mixin(light, @color) {
background: @color;
}
.mixin(dark, @color) {
color : @color;
}
.mixin(@_,@color) {
display: block;
}
@switch: light;
.boxbg {
mixin(@switch, #666666);
}

22. ③ミックスインと引数
本物の（？）条件分岐もできます。
//コンパイル後
. kyoutyou {
font-size: 20px;
background: #ff0000;
}
// @kuma: 15px の場合
. kyoutyou {
font-size: 15px;
}
//書き方
@kuma: 30px;
.mixin(@kuma) when (@kuma < 20px) {
font-size: @kuma;
}
.mixin(@kuma) when (@kuma >= 20px) {
font-size: 20px;
background: #ff0000;
}
.kyoutyou {
.mixin(@kuma);
}

23. ③ミックスインと引数
本物の（？）条件分岐もできます。
// 条件分岐は、以下のようなオプション？を持っています。
.mixin (@kuma) when (@kuma > 10), (@kuma < 10) { …… } // 「,」でorのような感じ
.mixin (@kuma) when (isnumber(@kuma) ) and ( @kuma > 10) { …… } // 見てそのまま
.mixin (@kuma) when not (@kuma > 0) { …… } // 否定
@kuma: mobile;
.mixin (@kuma) when (@kuma = mobile) { …… } //文字列評価
@kuma: 10;
.mixin (@kuma) when (isnumber(@kuma)) { …… } //タイプ評価
※タイプ評価は以下の通り
・iscolor ・isnumber・isstring ・iskeyword
・isurl ・ispixel ・ispercentage ・isem
※whenは全ての条件に当てはまらない値が入ると、エラーを起こします。orz

24. ③ミックスインと引数
パラメータの個数で条件分岐させる、という方法まであります。
//コンパイル後
.kuma {
color: #990000;
}
.kuma2 {
color: # 009900;
background:#000099;
}
//書き方
.bgstatus(@a) {
color: @a;
}
.bgstatus(@a,@b) {
color: @a;
background: @b;
}
.kuma {
.bgstatus(#990000);
}
.kuma2 {
.bgstatus(#009900, #000099);
}

25. ④入れ子と変数
入れ子の中に書いた変数を、上手に上書きしたり継承できます。
//コンパイル後
.foo {
background : #ff0000;
}
.foo .bar {
background : #0000ff;
}
.foo .bar2 {
background : #ff0000;
}
//書き方
.foo {
@kuma: #ff0000;
background: @kuma;
.bar {
@kuma: #0000ff;
background: @kuma;
}
.bar2 {
background: @kuma;
}
}

26. ⑥名前空間なるもの
別の場所で、クラスやIDの中身を呼び出せる。
//コンパイル後
#header a {
color: #FFa500;
display: block;
border: 1px solid #000000;
background: #666666;
}
#header a:hover {
color: #FFa500;
display: block;
border: 1px solid #000000;
background: #FFFFFF;
}
//書き方
#foo {
.button(){
display: block;
border: 1px solid #000000;
background: #666666;
&:hover {
background: #FFFFFF;
}
}
}
#header a {
color:#FFa500;
#foo > .button;
}

27. そのほか
勉強中に
わかったこととか
……ホホゥ

28. 動作環境
・ローカルでは、GoogleChromeでは動きませんでした！
⇒Macでは、ターミナルを立ち上げ、以下のように入れてあげてChromeを立ち上げると
、動くようです。
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --allow-file-access-
from-files
⇒Windowsでは、Chromeのショートカットを右クリックし、「リンク先」のプロパティ
…に上記の赤文字を追記すると動く 説があるのですが、僕は動きませんでした。
（そんなプログラムありません、とWindowsさんに叱られました）
どうやら、セキュリティ的にChromeは読み込んでくれないようです。
FireFoxは正常に動きました。IEは9は動きませんでした。Macのみですが、Safariは正常に
動きました。

29. どんな場面で使えそう？
①ちょー長いCSS書くとき
とりあえずソースコードが短くなることは分かりました。
そこまで長いCSS ……、書いたことナイケド 。
②ベンダープレフィックスを大量に書かないといけなさそうな場
合
いちいちベンダープレフィックスを何度も書くのは面倒。一回書いたらあとは引用できる
ようなイメージで使えるとよさそう。
資料には出てきてませんが、linear-gradientのベンダープレフィックスに対するLESSの書
き方も、ｇｇｒば出てきました。
結果的にソースコードも短くなりますし、それなりに重宝しそうな場面もありそうです。
③厳密な色を求めないといけない場合
カラー関数により、厳密な色を計算で割り出せる。基準の色だけしっかり割り出せばOK！
④そのままCSSも書ける

30. 「コンパイル」って？
せっかく書いたLESSのソースコードですが、最後はコンパイルしてプレーンなCSSに変
えてしまうことが多いようです。
理由は、JavaScriptのままだと動きが遅い、というのが要因にあるようです。
……で 実際の開発では
・コンパイルのアプリやらソフトを設定（.lessファイルを常に監視するとか）
・LESSを書く
・コンパイルのソフトでコンパイる
・HTMLは出力されるCSSを読み込みに行かせる
・ブラウザでチェックする
・完成したらCSSを読み出し、CSSファイルとして保存
みたいな流れ？なのかな？
less.jsは、大層なソフトやらアプリやら使わなくてもいいので便利です、ってことです。
それでも「書いたLESSをそのまま使いたい！」という人は、サーバーサイドのLESSなど
の導入をオススメします。

31. そのほか
さいごに！
ナニナニ？

32. さいごはWordBench ……らしく
WordPressに
組み込めるの？
クミコンデヨー

33. WordPressに組み込めるの？
ありました！
組み込めます！
ｷﾀ━━━(ﾟ∀ﾟ) !!━━━

34. WordPressに組み込めるの？
◎LESSをサポートしているプラグイン類
・JetPack by WordPress.com（の機能の一部）
・WP-LESS
・WP Booster ……（の機能の一部に搭載されているとかいないとか ？）
・BW LESS-CSS（評価が高い模様。ためしにいれたら動きました）
などなどなどなどなど。WordPress.orgで検索したらいっぱいあるよー。

35. 拙い発表でしたが、
ありがとうございました。
マタネー！