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

# [LESS](http://less-ja.studiomohawk.com/)

![LESS](http://kwout.com/cutout/a/2w/dp/mv7_bor.jpg)

-「SCSS(Sass)」に比べると非常に**シンプルな記法**。
- JavaScriptを利用したクライアントサイドでの動的なCSSの生成ができる。
- **「node.js」の利用も可能。**

## 概要

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

## 公式サイト

- [LESS - The dynamic stylesheet language.](http://less-ja.studiomohawk.com/)
- [ドットインストール LESS入門 (全8回)](http://dotinstall.com/lessons/basic_less_v2)
- [LESS入門！LESSの使い方と導入方法を解説](http://javatechnology.net/other/less-install/)

## 知識

- CSS/HTML
- Javascript/Node.js/npm

## 環境（インストール）

```bash: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を使ってブラウザでビルドする方法（**ブラウザ依存の為、非推奨**）
+ ツールを使ってローカルでビルドする方法

```text:フォルダ構成
 +- style.less（変換前）
 +- style.css （変換後）
```

### コンパイルコマンド

```bash:console
$ lessc style.less style.css
# lessc （変換前のファイル） （変換後のファイル）
$ lessc -x style.less style.css
# コンパイルオプション　-x : 圧縮する。
```

```less:style.less
@mycolor: red;
h1{
  font-size: 24px;
  color: @mycolor;
}

h2 {
  font-size: 24px;
  color: @mycolor;
}
```

　↓　コンパイル

```css:style.css
@mycolor: red;
h1{
  font-size: 24px;
  color: @mycolor;
}

h2 {
  font-size: 20px;
  color: @mycolor;
}
```

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

- [LESS関数](http://lesscss.org/functions/)

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

```css:style.css
/*
複数行　コメント
*/
h1 {
  font-size: 24px;
  color: red;
}
h2 {
  font-size: 16px;
  color: #cc0000;
}
```

# mixin

- mixinには引数をつける事ができる。
- mixinの後方に括弧をつけると、CSSには出力されない。
- コロン（：）の後ろに初期値を付加できる。
- 引数は「@引数名：値」の形で、順不同にできる。

```less: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();
}
```

```css: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;
}
```
## 継承

```less: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;
}

```

```css: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の比較とその結果](http://www.wan55.co.jp/column/detail/id=179)

----