CSS→Stylusを学ぶまでの軌跡③ LESS

LESS

-「SCSS(Sass)」に比べると非常にシンプルな記法。

• JavaScriptを利用したクライアントサイドでの動的なCSSの生成ができる。
• 「node.js」の利用も可能。

概要

• CSSを効率的に書く為のツール
• LESS：style.less →（コンパイル：lessc）→ CSS：style.css

公式サイト

• LESS - The dynamic stylesheet language.
• ドットインストール LESS入門 (全8回)
• LESS入門！LESSの使い方と導入方法を解説

知識

• 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;
}

コメント／四則演算／関数

• LESS関数

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;
}

---

SASS & LESS 比較

• SCSS(Sass)とLESSの比較とその結果

---