LESS
-「SCSS(Sass)」に比べると非常にシンプルな記法。
- JavaScriptを利用したクライアントサイドでの動的なCSSの生成ができる。
- 「node.js」の利用も可能。
概要
- CSSを効率的に書く為のツール
- LESS：style.less →（コンパイル：lessc）→ CSS：style.css
公式サイト
知識
- CSS/HTML
- Javascript/Node.js/npm
環境（インストール）
console
$ node -v
v0.10.26
$ node -v
v0.10.26
$ sudo npm install -g less
less@2.5.3 /Users/shokokb/.nvm/v0.10.26/lib/node_modules/less
├── graceful-fs@3.0.8
├── mime@1.3.4
├── image-size@0.3.5
├── errno@0.1.4 (prr@0.0.0)
├── promise@6.1.0 (asap@1.0.0)
├── source-map@0.4.4 (amdefine@1.0.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
└── request@2.64.0 (aws-sign2@0.5.0, forever-agent@0.6.1, caseless@0.11.0, stringstream@0.0.4, tunnel-agent@0.4.1, oauth-sign@0.8.0, isstream@0.1.2, json-stringify-safe@5.0.1, extend@3.0.0, node-uuid@1.4.3, qs@5.1.0, combined-stream@1.0.5, tough-cookie@2.0.0, form-data@1.0.0-rc3, bl@1.0.0, mime-types@2.1.7, http-signature@0.11.0, hawk@3.1.0, har-validator@1.8.0)
$ lessc -v
lessc 2.5.3 (Less Compiler) [JavaScript]
ビルド方法
- node.jsを使ってサーバサイドでビルドする方法
- less.jsを使ってブラウザでビルドする方法（ブラウザ依存の為、非推奨）
- ツールを使ってローカルでビルドする方法
フォルダ構成
+- style.less（変換前）
+- style.css （変換後）
コンパイルコマンド
console
$ lessc style.less style.css
# lessc （変換前のファイル） （変換後のファイル）
$ lessc -x style.less style.css
# コンパイルオプション -x : 圧縮する。
style.less
@mycolor: red;
h1{
font-size: 24px;
color: @mycolor;
}
h2 {
font-size: 24px;
color: @mycolor;
}
↓ コンパイル
style.css
@mycolor: red;
h1{
font-size: 24px;
color: @mycolor;
}
h2 {
font-size: 20px;
color: @mycolor;
}
コメント／四則演算／関数
style.less
/*
複数行 コメント
*/
// 単行 コメント
@h1-color:red;
@h2-color: darken(@h1-color, 10%);
@h1-size: 24px;
@h2-size: @h1-size - 8px;
h1{
font-size: @h1-size;
color: @h1-color;
}
h2 {
font-size: @h2-size;
color: @h2-color;
}
style.css
/*
複数行 コメント
*/
h1 {
font-size: 24px;
color: red;
}
h2 {
font-size: 16px;
color: #cc0000;
}
mixin
- mixinには引数をつける事ができる。
- mixinの後方に括弧をつけると、CSSには出力されない。
- コロン（：）の後ろに初期値を付加できる。
- 引数は「@引数名：値」の形で、順不同にできる。
style.less
// クラスをつくる。
.my-mixin(@weight: 5px; @padding: 7px) {
border: @weight solid red;
padding: @padding;
margin: 7px;
}
#my-mixin-id() {
color: yellow;
}
h1 {
font-size: 24px;
.my-mixin();
#my-mixin-id();
}
h2 {
font-size: 20px;
.my-mixin(@padding:20px, @weight:3px);
#my-mixin-id();
}
style.css
h1 {
font-size: 24px;
border: 5px solid red;
padding: 7px;
margin: 7px;
color: yellow;
}
h2 {
font-size: 20px;
border: 3px solid red;
padding: 20px;
margin: 7px;
color: yellow;
}
継承
style.less
// .button {
// font-size: 14px;
// border: 1px solid black;
// &-ok {
// color:green;
// }
// &-ng {
// color: red;
// }
// }
.button {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
&:extend(.button);
color:green;
}
.button-ng {
&:extend(.button);
color: red;
}
style.css
.button,
.button-ok,
.button-ng {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
color: green;
}
.button-ng {
color: red;
}