大阪Node学園八時限目
node.jsみちしるべ

コーディングのための less
- 基礎編 2013/10/26
スライド内のリンクはクリックできます
リンクはこの色です
もくじ

1. Q

2. 自己紹介
3. lessとは

4. lessの基本ルール
5. Mixins

6. 数値演算
7. 関数

8. lessのコンパイル

9. Bootstrapのソースの読み方

10. Q?
Q
初めに質問です
次のいずれかに当てはまりますか?
lessというのに興味はあるけど使ったことはない
cssが肥大化してメンテナンスが大変

Twitter Bootstrapをカスタマイジして使いたい
SASS/Connpassがよくわからない
もしどれかに当てはまったらこのスライドがお役に
立ちます。
自己紹介
渡辺俊輔
フリーランスWebエンザニア
Blog : A Node in Nodes
大阪Node学園主催

趣味は読書と英語と瞑想
最近ザョギングを始めようかと思っています
google+ 大阪node学園

質問、訂正などありまし...
lessとは
cssプリプロセッサ less
cssの記述とメンテナンスを効率化する
Twitter Bootstrapであまりにも有名

cssをそのまま書いてもエラーにならない
基本は全てcssと同じ
最新は1.4.0
一部後方互換性がなくなっている

@import-onceがなくなり@importに統一

セレクタの変数展開がシンプルに。変数の文字列展開と同じルールになった
ブラウザ版にes5-shim.jsが同梱されなくなった

str...
つまみ いがおいしい
lessでややこしいのはMixinsとFunction
わかるところだけ使えばいい
lessを使うとcssを効率良く書ける
lessの基本ルール
入れ子で記述する
1 //less
2 body {
a {
3
color: #ffffff;
4
}
5
h1 {
6
color: #000000;
7
}
8
9 }

1
2
3
4
5
6
7
8

//css
body a {
c...
同列のセレクタ
pseudo要素、 追加のクラス指定など
&を使う

1 //less
2 body {
a {
3
&.thumb {
4
color: #ffffff;
5
}
6
&:hover {
7
color: #ffffff;
8...
MediaQueryも入れ子に出来る
1 //less
2 .one {
@media (width: 400px) {
3
font-size: 1.2em;
4
@media print and color {
5
color: blue;...
変数
@マークをつけると変数名になる
あらかじめ値を設定しておける

参照時はそのまま変数名を書く
1
2
3
4
5
6
7
8
9
10

//less
@chetwode-blue: #3B71B1;
@width: 960px;
bod...
同じ変数を複数宣言すると内側から順
番に参照される
変数のスコープは内から外へと順番に参照される
同じ名前の変数を宣言する場合は場所に注意<importする際など
1
2
3
4
5
6
7
8
9
10
11
12

//less
@favo...
変数の名前を変数にも出来る
1
2
3
4

//less
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;

1 //CSS
2 content: "I am fnord.";
変数は先に宣言しなくても良い
1
2
3
4
5
6
7
8

//less
.lazy-eval-scope {
width: @var;
@a: 9%;
}

1 //css
2 .lazy-eval-scope {
width: 9%;
...
変数の値を文字列内で展開する
@の後を波括弧でくくってやると変数の値を文字列内に展開できる
1 //less
2 @base-url: "http://assets.fnord.com";
3 background-image: url("@{...
セレクタ名に変数を使う
文字列展開とやり方は同じ
1
2
3
4
5

//less
@name: blocked;
.@{name} {
color: black;
}

1 //css
2 .blocked {
color: black;
...
コメント
// コメント

/* コメント */
のニ種類が使える
ファイルのインポート
import で他のファイルをインポートできる

cssファイルもlessファイルも同じようにインポートできる
拡張子をつけないとlessファイルとみなされ、内容が読み込まれる
1 @import 'style'

css...
media queryを使って条件つき
importができる
スクリーンで幅が400ピクセル以上の時だけ読み込む例
1 @import "library.less" screen and (max-width: 400px);
応用編
&単独の使い方

以下省略

Namespaces

文字列のエスケープ
less内でのjavascriptの実行

メディアクエリの指定に変数を使う
htmlのように入れ子で記述する
便利な &
変数が使える
Mixins
Mixinsとは
他のクラスのプロパティを全て引き継 機能
角丸やClearfix、ドロップシャドウなど、記述量が多く、
共通して使われるプロパティを一箇所にまとめて記述できる
たくさんルールがあるのでわからないところはこだわらない
Mixinsのやり方
要素内にクラス名を書く

だけ
1
2
3
4
5
6
7

//less
.dotted-border {
border: 1px dotted black;
}
.box {
.dotted-border;
}

1
...
clearfixの例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//less
.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
display: ta...
()ありのMixinと()なしのMixin
()なしのMixinは通常のクラスと同じ、

()ありの場合、そのクラス自体は出力されたCSSに含まれない
引数付きのMixin
クラス内で使う数値や色などを場合によって変えたい場合に
1
2
3
4
5
6
7
8

// LESS
.dotted-border(@width){
border: @width dotted black;
}
.bo...
引数のデフォルト値付きのMixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// LESS
.rounded-corners (@radius: 5px) {
-webkit-border-radi...
複数の引数をとる場合はセミコロンで区
切る
グラデーションの例
1
2
3
4
5
6
7
8
9
10
11
12

//less
.box{
.horizontal;
}

.horizontal(@start-color: #555; @...
応用編
今回は省略
arguments値

同じ名前で引数の数が違うMixinを作れる

Mixinsの中の変数も引き継がれる
可変長引数

Mixinsの中にMixinを入れることも出来る

Mixinsに!importantをつけて呼び出す...
Mixinsを活用すると記述量を大幅に減らせる
Mixinsを別ファイルに分離しておくと再利用が容
易
数値演算
四則演算が出来る
数値、色およびそれらを格納した変数に対して
1 //less
1 //CSS
2 body#operations {
@width: 100%;
3
2 body#operations {
@base_font_size: 3...
数値、色には四則演算が出来る
単位は混ぜるのは混乱のもと
関数
関数とは
lessの機能として用意されている、決まった処理をしてくれる命令のこと
Mixinsと並ぶlessの便利機能

数値計算とか色の変更とか、たくさんあります
関数一覧を っとながめて使えそうなものを探すと良い
色の操作例
1 //less
2 body#color-function {
@true_red: #FF0000;
3
1 //CSS
a {
4
2 body#color-function a {
//赤の彩度を50%下げる
5
color...
関数を使ったトーンの揃え方
ネタ元:Dribbble - My Secret for Color Schemes by Erica Schoonmaker

fadeしてoverlayだとうまくいかなかったのでmix関数を使って元の色を75%、...
lessのコンパイル
コマンドのインストール
1 npm install -g less
lessのコンパイル
lesscコマンドを使う
1 lessc style.less

画面にずらずらと表示されるので、ファイルに書き出すにはリダイレクトを使う
1 lessc style.less > style.css
CSSの圧縮
-x オプション、もしくは --yui-compre.line-numbersssion オプションをつける
1 lessc -x style.less > style.css
自動コンパイルとLiveReload
GUIを使う方法

lessのwatch機能を使う方法
gruntを使う方法
GUIコンパイラ
Mac用GUI
For Mac OS X

http://incident57.com/less/
Windows用GUI
- Windows GUI for less.js
http://winless.org/
ライブリロ...
lessのwatch機能を使う方法
ブラウザでless.jsを読み込んで、URL末尾に #!watch をつける
詳細は省略
gruntを使う方法
lessに限らず、jadeやcoffee-scriptなども一括して扱えるので便利
準備が面倒
コーディング用ならGUIアプリで十分
Webアプリを書く場合自動コンパイルはサーノ側
でできるので必要ない
lessベースのcssフレームワーク
Bootstrap
一番有名なless cssフレームワーク
twitter bootstrap ソース

ソースを読むとlessのドキュメントよりも参考になります
1. まずは bootstrap.less を開きます。このファイルで他のファ...
その他のless cssフレームワーク
Semantic UI
http://semantic-ui.com/
InK - Interface Kit
http://ink.sapo.pt/

Clearless by clearleft
ht...
Q?
Thank you!

photo by cygnus921 from flickr
宣伝
HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド
(DESIGN & WEB TECHNOLOGY)
半年ほど前に本を書きました
Upcoming SlideShare
Loading in …5
×

大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」

1,575 views

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,575
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
15
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」

  1. 1. 大阪Node学園八時限目 node.jsみちしるべ コーディングのための less - 基礎編 2013/10/26
  2. 2. スライド内のリンクはクリックできます リンクはこの色です
  3. 3. もくじ 1. Q 2. 自己紹介 3. lessとは 4. lessの基本ルール 5. Mixins 6. 数値演算 7. 関数 8. lessのコンパイル 9. Bootstrapのソースの読み方 10. Q?
  4. 4. Q
  5. 5. 初めに質問です 次のいずれかに当てはまりますか? lessというのに興味はあるけど使ったことはない cssが肥大化してメンテナンスが大変 Twitter Bootstrapをカスタマイジして使いたい SASS/Connpassがよくわからない
  6. 6. もしどれかに当てはまったらこのスライドがお役に 立ちます。
  7. 7. 自己紹介 渡辺俊輔 フリーランスWebエンザニア Blog : A Node in Nodes 大阪Node学園主催 趣味は読書と英語と瞑想 最近ザョギングを始めようかと思っています google+ 大阪node学園 質問、訂正などありましたら下記からどう twitter@craftgear craftgear@gmail.com
  8. 8. lessとは
  9. 9. cssプリプロセッサ less cssの記述とメンテナンスを効率化する Twitter Bootstrapであまりにも有名 cssをそのまま書いてもエラーにならない 基本は全てcssと同じ
  10. 10. 最新は1.4.0 一部後方互換性がなくなっている @import-onceがなくなり@importに統一 セレクタの変数展開がシンプルに。変数の文字列展開と同じルールになった ブラウザ版にes5-shim.jsが同梱されなくなった strictMathモードの導入 数値計算するときには括弧が必要なモード。1.4.0ではデフォルトでオフ、今後デフォルトで音になる予定 strictUnitオプションの導入 単位が同じ場合にのみ演算可能にするモード。デフォルトでオフ、デフォルトでオンになる予定なし。 違う単位同士の計算方法が変わった (4px * 3em) / 4px used to equal 3px and it now equals 3em
  11. 11. つまみ いがおいしい lessでややこしいのはMixinsとFunction わかるところだけ使えばいい
  12. 12. lessを使うとcssを効率良く書ける
  13. 13. lessの基本ルール
  14. 14. 入れ子で記述する 1 //less 2 body { a { 3 color: #ffffff; 4 } 5 h1 { 6 color: #000000; 7 } 8 9 } 1 2 3 4 5 6 7 8 //css body a { color: #ffffff; } body h1 { color: #000000; }
  15. 15. 同列のセレクタ pseudo要素、 追加のクラス指定など &を使う 1 //less 2 body { a { 3 &.thumb { 4 color: #ffffff; 5 } 6 &:hover { 7 color: #ffffff; 8 } 9 } 10 11 } 1 2 3 4 5 6 7 //css body a.thumb { color: #ffffff; } body a:hover { color: #ffffff; }
  16. 16. MediaQueryも入れ子に出来る 1 //less 2 .one { @media (width: 400px) { 3 font-size: 1.2em; 4 @media print and color { 5 color: blue; 6 } 7 } 8 9 } 1 2 3 4 5 6 7 8 9 10 11 //css @media (width: 400px) { .one { font-size: 1.2em; } } @media (width: 400px) and print and color { .one { color: blue; } } exerpt from less document
  17. 17. 変数 @マークをつけると変数名になる あらかじめ値を設定しておける 参照時はそのまま変数名を書く 1 2 3 4 5 6 7 8 9 10 //less @chetwode-blue: #3B71B1; @width: 960px; body#variable { width: @width; a { color: @chetwode-blue; } } 1 2 3 4 5 6 7 //css body#variable { width: 960px; } body#variable a { color: #3b71b1; }
  18. 18. 同じ変数を複数宣言すると内側から順 番に参照される 変数のスコープは内から外へと順番に参照される 同じ名前の変数を宣言する場合は場所に注意<importする際など 1 2 3 4 5 6 7 8 9 10 11 12 //less @favorite-color: #993333; 1 body { 2 color: @favorite-color; 3 a { 4 @favorite-color: #333399; 5 color: @favorite-color; 6 } 7 li { 8 color: @favorite-color; 9 } 10 } //css body { color: #993333; } body a { color: #333399; } body li { color: #993333; }
  19. 19. 変数の名前を変数にも出来る 1 2 3 4 //less @fnord: "I am fnord."; @var: "fnord"; content: @@var; 1 //CSS 2 content: "I am fnord.";
  20. 20. 変数は先に宣言しなくても良い 1 2 3 4 5 6 7 8 //less .lazy-eval-scope { width: @var; @a: 9%; } 1 //css 2 .lazy-eval-scope { width: 9%; 3 4 } @var: @a; @a: 100%; exerpt from less document
  21. 21. 変数の値を文字列内で展開する @の後を波括弧でくくってやると変数の値を文字列内に展開できる 1 //less 2 @base-url: "http://assets.fnord.com"; 3 background-image: url("@{base-url}/images/bg.png"); 1 //css 2 background-image: url("http://assets.fnord.com/images/bg.png");
  22. 22. セレクタ名に変数を使う 文字列展開とやり方は同じ 1 2 3 4 5 //less @name: blocked; .@{name} { color: black; } 1 //css 2 .blocked { color: black; 3 4 }
  23. 23. コメント // コメント /* コメント */ のニ種類が使える
  24. 24. ファイルのインポート import で他のファイルをインポートできる cssファイルもlessファイルも同じようにインポートできる 拡張子をつけないとlessファイルとみなされ、内容が読み込まれる 1 @import 'style' cssをインポートする時には拡張子をつけるか、オプションでcssを指定する 1 @import 'style.css' 2 @import (css) 'style' cssをインポートするとcssのimport文として処理され、内容は展開されない トップレベルでのcss importはどこに書いてもコンパイル後に一番上に移動さ れる
  25. 25. media queryを使って条件つき importができる スクリーンで幅が400ピクセル以上の時だけ読み込む例 1 @import "library.less" screen and (max-width: 400px);
  26. 26. 応用編 &単独の使い方 以下省略 Namespaces 文字列のエスケープ less内でのjavascriptの実行 メディアクエリの指定に変数を使う
  27. 27. htmlのように入れ子で記述する 便利な & 変数が使える
  28. 28. Mixins
  29. 29. Mixinsとは 他のクラスのプロパティを全て引き継 機能 角丸やClearfix、ドロップシャドウなど、記述量が多く、 共通して使われるプロパティを一箇所にまとめて記述できる たくさんルールがあるのでわからないところはこだわらない
  30. 30. Mixinsのやり方 要素内にクラス名を書く だけ 1 2 3 4 5 6 7 //less .dotted-border { border: 1px dotted black; } .box { .dotted-border; } 1 2 3 4 5 6 7 //css .dotted-border { border: 1px dotted black; } .box { border: 1px dotted black; }
  31. 31. clearfixの例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //less .clearfix() { &:before, &:after { content: " "; /* 1 */ display: table; /* 2 */ } &:after { clear: both; } } img { .clearfix; } 1 2 3 4 5 6 7 8 9 10 11 //CSS img:before, img:after { content: " "; /* 1 */ display: table; /* 2 */ } img:after { clear: both; }
  32. 32. ()ありのMixinと()なしのMixin ()なしのMixinは通常のクラスと同じ、 ()ありの場合、そのクラス自体は出力されたCSSに含まれない
  33. 33. 引数付きのMixin クラス内で使う数値や色などを場合によって変えたい場合に 1 2 3 4 5 6 7 8 // LESS .dotted-border(@width){ border: @width dotted black; } .box { .dotted-border(4px); } 1 //CSS 2 .box { border: 4px dotted #000000; 3 4 } この場合引数を指定しないとエラーになる 1 .box-error { .dotted-border(); //エラー 2 3 }
  34. 34. 引数のデフォルト値付きのMixin 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // LESS .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { // フォル の5px る .rounded-corners; } #footer { //5pxの代わ 10px する .rounded-corners(10px); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //CSS #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
  35. 35. 複数の引数をとる場合はセミコロンで区 切る グラデーションの例 1 2 3 4 5 6 7 8 9 10 11 12 //less .box{ .horizontal; } .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)) background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percen background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); background-repeat: repeat-x; } exerpt from twitter bootstrap
  36. 36. 応用編 今回は省略 arguments値 同じ名前で引数の数が違うMixinを作れる Mixinsの中の変数も引き継がれる 可変長引数 Mixinsの中にMixinを入れることも出来る Mixinsに!importantをつけて呼び出すと、 mixins内部の全てプロパティに!importantがつく Mixinsの引数で振る舞いをかえる Guarded Mixins extends
  37. 37. Mixinsを活用すると記述量を大幅に減らせる Mixinsを別ファイルに分離しておくと再利用が容 易
  38. 38. 数値演算
  39. 39. 四則演算が出来る 数値、色およびそれらを格納した変数に対して 1 //less 1 //CSS 2 body#operations { @width: 100%; 3 2 body#operations { @base_font_size: 36px; 4 border-right: 2em; 3 @h2_font_size: @base_font_size / 2 4 5 border-left: 2px; border-right: 1em + 1px; 6 5 } border-left: 1px + 1em; 7 6 body#operations a { a { 8 color: #ffff00; 7 color: (#FF0000 + #00FF00); 9 border: 5px; 8 border: (1px * 5); 10 } 11 9 } h1 { 12 10 body#operations h1 { width: @width / 2; 13 width: 50%; 11 font-size: @base_font_size * 2 14 font-size: 72px; 12 } 15 13 } h2 { 16 14 body#operations h2 { width: @width * 0.3; 17 font-size: @h2_font_size; width: 30%; 15 18 } 19 font-size: 18px; 16 20 } 17 }
  40. 40. 数値、色には四則演算が出来る 単位は混ぜるのは混乱のもと
  41. 41. 関数
  42. 42. 関数とは lessの機能として用意されている、決まった処理をしてくれる命令のこと Mixinsと並ぶlessの便利機能 数値計算とか色の変更とか、たくさんあります 関数一覧を っとながめて使えそうなものを探すと良い
  43. 43. 色の操作例 1 //less 2 body#color-function { @true_red: #FF0000; 3 1 //CSS a { 4 2 body#color-function a { //赤の彩度を50%下げる 5 color: #bf4040; color: desaturate(#FF0000, 50%) 3 6 4 } } 7 8 }
  44. 44. 関数を使ったトーンの揃え方 ネタ元:Dribbble - My Secret for Color Schemes by Erica Schoonmaker fadeしてoverlayだとうまくいかなかったのでmix関数を使って元の色を75%、 色付け用の色を25%で混ぜあわせています。 1 2 3 4 5 6 7 8 9 //less @color1: #E04644; @color2: #FDE47F; @color3: #7CCCE5; @tint: #FF9C00; @ol1: mix(@color1, @tint, 75%); @ol2: mix(@color2, @tint, 75%); @ol3: mix(@color3, @tint, 75%); 1 2 3 4 5 6 7 8 9 10 //CSS body#tinted h1 { color: #e85c33; } body#tinted h2 { color: #fed25f; } body#tinted h3 { color: #9dc0ac; }
  45. 45. lessのコンパイル
  46. 46. コマンドのインストール 1 npm install -g less
  47. 47. lessのコンパイル lesscコマンドを使う 1 lessc style.less 画面にずらずらと表示されるので、ファイルに書き出すにはリダイレクトを使う 1 lessc style.less > style.css
  48. 48. CSSの圧縮 -x オプション、もしくは --yui-compre.line-numbersssion オプションをつける 1 lessc -x style.less > style.css
  49. 49. 自動コンパイルとLiveReload GUIを使う方法 lessのwatch機能を使う方法 gruntを使う方法
  50. 50. GUIコンパイラ Mac用GUI For Mac OS X http://incident57.com/less/ Windows用GUI - Windows GUI for less.js http://winless.org/ ライブリロード機能がない? その他のGUIツール https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js
  51. 51. lessのwatch機能を使う方法 ブラウザでless.jsを読み込んで、URL末尾に #!watch をつける 詳細は省略
  52. 52. gruntを使う方法 lessに限らず、jadeやcoffee-scriptなども一括して扱えるので便利 準備が面倒
  53. 53. コーディング用ならGUIアプリで十分 Webアプリを書く場合自動コンパイルはサーノ側 でできるので必要ない
  54. 54. lessベースのcssフレームワーク
  55. 55. Bootstrap 一番有名なless cssフレームワーク twitter bootstrap ソース ソースを読むとlessのドキュメントよりも参考になります 1. まずは bootstrap.less を開きます。このファイルで他のファイルをインポート して、一つのファイルにしています。 2. bootstrap.less は上から順番に基本的な設定が書かれているファイルにな っています。個別のファイルに見つからない変数やMixinsは、それより先に読 み込まれているファイルに書かれています。 3. たとえば、一番上に書かれている variables.less にはそれ以降のファイルで 参照される変数がまとめて宣言してあります。 4. 後はカスタマイジしたい部分のファイルや、参考にしたいファイルを開いて、中 身を読んでいきます。
  56. 56. その他のless cssフレームワーク Semantic UI http://semantic-ui.com/ InK - Interface Kit http://ink.sapo.pt/ Clearless by clearleft http://clearleft.github.io/clearless/
  57. 57. Q?
  58. 58. Thank you! photo by cygnus921 from flickr
  59. 59. 宣伝 HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY) 半年ほど前に本を書きました

×