CSS
less

LESSはCSSより断然便利だぞ~

今回はLESSを勉強していきます。

使う教材はこちら。

ドットインストールLESS入門

https://dotinstall.com/lessons/basic_less_v2/27601

*この記事の投稿者はプログラミング初級者です。間違っていることがあれば、指摘してくださると嬉しいです。


それでは、LESSとは何ぞや?から見ていきます。


LESSとは

CSSのフレームワーク(簡単に・効率的に書けるようにしたもの)です。

Node.jsのnpmというパッケージマネージャーで提供されています。


Node.jsとは

サーバーサイドのJavaScript


パッケージマネージャーとは

コンピュータに何のソフトウェアがインストールされたかを記録し、新しいソフトウェアのインストール・新しいバージョンへのソフトウェアの更新・以前インストールしたソフトウェアの削除を容易に行えるようにするプログラムのことです。

複数のファイルを1つにしたものがパッケージです。

パッケージにまとめれば、インストールや削除が簡単になります。


nvmとは

Node Version Managerの略

Node.jsのバージョン管理するパッケージです。


npmとは

Node Package Managerの略

Node.jsで作られたパッケージ(nvm)やライブラリを管理するツールです。


ライブラリとは

プログラムの部品を集めたファイルです。ライブラリを活用すれば、自分で作る処理の量を減らせます。


LESSではlesscというコンパイラ(ソースコートをコンピュータが分かる言葉に変換してくれるプログラム)を使ってCSSファイルに変換します。

styles.less⇒lessc⇒styles.css

ってイメージです。


それでは、どのように書きやすくなるのでしょうか。

例えば、こんなコードがあったとします。

h1{

font-size:24px;
color:#00f
}
h2{
font-size:20px;
color:#00f
}

h1とh2で同じ青色(#00f)を使っています。

LESSならこれを1つにまとめられます。

@mycolor: #00f;

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

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

このまとめたLESSファイルをCSSに変換するには、LESSファイルがあるフォルダに行って、

lessc styles.less styles.css

とします。

そうすれば、、、

lessless.jpg

こんな感じ。

CSSに変換してくれています。

LESSを書き直したら変換がまた必要なのでそこは注意。

ちなみに、「-x」を付ければ、CSSを圧縮してくれます。

もうちょっとLESSの変数や関数を見ていきましょう。


演算できる

CSSではできないですが、LESSでは演算できます。


@h1-color: red;
@h2-color: darken(@h1-color, 10%);
@h1-size: 24px;
@h2-size: @h1-size - 4px;

h1 {
font-size: @h1-size;
color: @h1-color;
}

h2 {
font-size: @h2-size;
color: @h2-color;
}

h2のサイズは常にh1より4px小さくできます。

僕が感動したのがこちら!


@h2-color: darken(@h1-color, 10%);

10%だけ暗くする、等の細かい設定も可能。

明るいはlightenです。

このように、一定のルールをもってページのレイアウトを設定できるのはとても便利ですよね。

変換するとこんな感じ。

less演算.png

VScodeで色の変数の場所にカーソル当てると、こんな画面出てきました。

手軽に色を変更できます。

VScode神かよ!!!



変数を宣言して管理できる

また、セレクタ(h~,クラス)も変数で管理できます。

@header: .myheader;

@class: .myclass;
@dir: "/img";

@{header}2{
font-size: @h2-size;
}
@{class}1{
background:url("@{dir}/bg.png");
}

@{header}2→h2

@{class}1→.myclass1

と変換してくれます。

また、/imgのディレクトリ部分が変わる可能性がある時は変数を宣言すれば便利です。



LESSの中で階層的表現

CSSを階層的に書ければ、書く量を減らせます。

階層表現.png

&は親クラスを示します。



ミックスインという考え方

共通の設定をどこかで部品化して管理しておきたいときに使える考え方です。

ミックスインのクラスを作り、その中に共通の設定書きます。

そうすれば、それぞれのセレクタからミックスインを呼び出せます。

ミックスイン.png

ちなみに、セレクタの方の「.my-mixin」の後の()はあってもなくても良いです。

つまりまとめると、、、

LESSではクラスやIDの設定を他の設定に組み込める

ってことです。

また、クラスを作る時に(クラスの方であることに注意!)、


.my-mixin()

として後ろに()をつければ、変換した時にCSSから.my-mixinの設定が消えてくれます。



パラメータ付きミックスイン

ミックスインを呼び出す時に、ちょっとだけ設定を変えたい時に使えます。

ミックスインの方で、あらかじめ変数にしておけばOKです。

さらに、変数に初期値を与えることも可能です。

複数指定する時は、「;」で区切ります。

マイミックスイン-パラメータ.png



extend

あるクラスを作って、それとは違うバリエーションのクラスをいくつか作りたい時に使えます。

ミックスインとの違いは、

・派生や関係性が分かりやすい

・コード量を減らせる

です。

マークアップ(コードを書く)時にはextendが推奨されています。

extend.png

このように、コードの量が少なくなります。

以上がLESSの基本となります!

もっと勉強して使いこなせるようにしていきます。