LESS入門

LESSとは

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

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

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

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

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

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

npm install -g less

1-3. 流れ

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

コマンドはこちら

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

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ファイルに変換しないとブラウザでは使えません。

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

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. ミックスイン（同じような設定を部品化して管理しよう）

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

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はセキュリティ上使えなかった気がする。