Upload
shunsuke-watanabe
View
1.159
Download
4
Embed Size (px)
Citation preview
もくじ
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/