LESS入門


#LESSとは

cssを効率的に書くためのツール


## 1. Node.jsを用いてやるパターン

## 1-1. node.jsをインストール

ここから、windowsもmacもlinuxもインストールできるらしい
めっちゃ簡単やん！

https://nodejs.org/ja/download/

## 1-2. lessをインストールする

ターミナルにこれを打ったらインストールされます。

```
npm install -g less
```

## 1-3. 流れ

まず、lessファイルを作って、「lessc」コマンドを使って、cssファイルに変換する。という流れになります。

コマンドはこちら

(ファイル名は仮で、styles.lessとstyle.cssにしています。)



```zsh
lessc styles.less styles.css
```



## 1-4.　lessには変数という概念がある

lessには変数という概念がある

例えば、このcssファイルを見てみる

```styles.css

h1 {
    font-size: 24px;
    font-color: blue;
}
h2 {
    font-size: 20px;
    font-color: blue;
}

```

この場合、もしやっぱり色をredに変えよーと思ったら、どっちもredに書き直さないといけないですよね。
2つならまだしもこれが100個とかになったら帰るのめんどくせえ・・・。

そんな時に、lessファイルで変数を使います！

```styles.less
@mycolor: blue;

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

これはlessファイルなので、cssファイルに変換しないとブラウザでは使えません。

ターミナルでこのように打ちます

```zsh
lessc styles.less styles.css
```

これは、「style.less」を「styles.css」に変換という意味です。
このコマンドを打ったら、style.cssができていると思います。

## 1-5. lessで演算をする

実はこんな記述ができます

```styles.less
@mycolor: blue;

@h1-size: 24px;
@h2-size: @h1-size - 4px;

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

今回は引き算でしたが、掛け算も割り算も足し算もできます！！！！

実は、関数もできるので、公式サイトを要チェックですね。

関数は、例えば、h2の色はh1の色よりどのくらい薄くするとか、濃くするとか色の具合を決められたりします。他にもたくさん。


## 1-6. 変数はp, h1などのプロパティ名にも使える

変数はプロパティ名などにも使えます。
以下の例では、h1に青色の色をつけるという指示になっていますが、、、

```styles.less
@header: h;
@color: color;

@{header}1 {
    @{color}: blue;
}

```

以下のように変更すると
「myheader1」というクラスに青色の色をつけるようになります。

```styles.less
@header: .myheader;
@color: color;

@{header}1 {
    @{color}: blue;
}
```

そんな使わなさそうww

例えば、画像のディレクトリを変数で管理するとかは結構使えそう

```styles.css

h1 {
    background: url("./img/bg.png");
}
```

これであれば、変数で管理するとこうなります

```styles.less

@dir: "./img"
h1 {
    background: url("@{dir}/bg.png");
}
```

## 1-7. 階層的な書き方もできる

cssで以下のように書きたい場合、、、

```styles.css
header {
    font-size: 18px;
}

header a {
    color: red;
}
```
lessではこう書きます！！

```styles.less
header {
    font-size: 18px;
    a {
    color: red;
    }
}

```

で、しかも&マークを使うとめちゃくちゃ便利になります。

`header a`の擬似クラスに対してcssをつけたい場合はこうなります

```styles.less
header {
    font-size: 18px;
    a {
    color: red;
    &:hover {
        color: green
        }
    }
}

```

cssにするとこうなりますよね

```styles.css
header {
    font-size: 18px;
}

header a {
    color: red;
}

header a:hover {
    color: green
}
```

同じようなクラス名を指定したい場合も、lessの「&」は便利です。

```styles.less
.button {
    &-ok {
        color: green;
    }
    &-ng {
        color: red;
    }
}

```

これをcssに変換するとこうなります

```styles.css
.button-ok {
    color: green;
}
.button-ng {
    color: red;
}

```


## 1-8. ミックスイン（同じような設定を部品化して管理しよう）

例えば、以下の部分は結構いろんなところに使っていて、毎回書くの面倒くせえなっていう時に使えます。

```css

border: 5px solid red;
padding: 7px;
margin: 7px;
```

ミックスインを使う場合は、普通にcss用のクラスを作ってあげればオーケー
ま、id(#)でもいいんやけど、統一しよう。

```styles.less
.my-mixin {
    border: 5px solid red;
    padding: 7px;
    margin: 7px;
}

h1 {
    font-size: 24px;
    .my-mixin;
}

h2 {
    font-size: 20px;
    .my-mixin;
}
```

`.my-mixin`の設定をcssに反映させたくない場合は、`.my-mixin()`としてあげます。

```styles.less
.my-mixin() {
    border: 5px solid red;
    padding: 7px;
    margin: 7px;
}

h1 {
    font-size: 24px;
    .my-mixin;
}

h2 {
    font-size: 20px;
    .my-mixin;
}
```

## 1-9:　パラメータつきミックスイン

ミックスインを呼び出す時に、基本の設定はそのままなんだけど、一部だけ変えたいという場合もあります。

例えば、以下のコードの、borderだけたまに違う数値を使いたいという場合があるかもしれません。

```styles.less
.my-mixin() {
    border: 5px solid red;
    padding: 7px;
    margin: 7px;
}

h1 {
    font-size: 24px;
    .my-mixin;
}

h2 {
    font-size: 20px;
    .my-mixin;
}
```

その時は、こんな感じ

```styles.css
.my-mixin(@width) {
    border: @width solid red;
    padding: 7px;
    margin: 7px;
}

h1 {
    font-size: 24px;
    .my-mixin(5px);
}

h2 {
    font-size: 20px;
    .my-mixin(10px);
}
```

初期値をつけたい場合は
`.my-mixin(@width: 5px) {`にしたらいけます

2つ以上のパラメータを設定したい時は、`.my-mixin(@width:5px; @padding:7px) {`で、呼び出す時に`.my-mixin(10px; 15px)`とかでいけます。



## 2. ブラウザ上でやるパターン

```
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>
```

npmもlessもインストールせずに、これをhtmlファイルに貼り付けると、ブラウザ上で、勝手にcssに変換してくれます。

でも、ローカル開発環境でやる場合、google chromはセキュリティ上使えなかった気がする。