More Related Content Similar to 大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」 (20) 3. もくじ
1. Q
2. 自己紹介
3. lessとは
4. lessの基本ルール
5. Mixins
6. 数値演算
7. 関数
8. lessのコンパイル
9. Bootstrapのソースの読み方
10. Q?
7. 自己紹介
渡辺俊輔
フリーランスWebエンザニア
Blog : A Node in Nodes
大阪Node学園主催
趣味は読書と英語と瞑想
最近ザョギングを始めようかと思っています
google+ 大阪node学園
質問､訂正などありましたら下記からどう
twitter@craftgear
craftgear@gmail.com
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. 同列のセレクタ
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. 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
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. 複数の引数をとる場合はセミコロンで区
切る
グラデーションの例
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
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 }
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. 関数を使ったトーンの揃え方
ネタ元：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;
}
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
55. Bootstrap
一番有名なless cssフレームワーク
twitter bootstrap ソース
ソースを読むとlessのドキュメントよりも参考になります
1. まずは bootstrap.less を開きます｡このファイルで他のファイルをインポート
して､一つのファイルにしています｡
2. bootstrap.less は上から順番に基本的な設定が書かれているファイルにな
っています｡個別のファイルに見つからない変数やMixinsは､それより先に読
み込まれているファイルに書かれています｡
3. たとえば､一番上に書かれている variables.less にはそれ以降のファイルで
参照される変数がまとめて宣言してあります｡
4. 後はカスタマイジしたい部分のファイルや､参考にしたいファイルを開いて､中
身を読んでいきます｡
