Help us understand the problem. What is going on with this article?

LESS入門

More than 1 year has passed since last update.

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にしています。)

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away