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