もくじ
1. Q2. 自己紹介
3. lessとは
4. lessの基本ルール
5. Mixins6. 数値演算
7. 関数
8. lessのコンパイル
9. Bootstrapのソースの読み方
10. Q?
初めに質問です
次のいずれかに当てはまりますか?
lessというのに興味はあるけど使ったことはない
cssが肥大化してメンテナンスが大変
Twitter Bootstrapをカスタマイジして使いたい
SASS/Connpassがよくわからない
自己紹介
渡辺俊輔
フリーランスWebエンザニア
大阪Node学園主催
Blog :
趣味は読書と英語と瞑想
最近ザョギングを始めようかと思っています
質問、訂正などありましたら下記からどう
A Node in Nodes
google+ 大阪node学園
twitter@[email protected]
最新は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
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
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クラス内で使う数値や色などを場合によって変えたい場合に
この場合引数を指定しないとエラーになる
// 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
四則演算が出来る
数値、色およびそれらを格納した変数に対して
//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のコンパイル
lesscコマンドを使う
画面にずらずらと表示されるので、ファイルに書き出すにはリダイレクトを使う
lessc style.less1
lessc style.less > style.css1
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
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/