LESSとは？ホームページを効率的に書く言語の1つ！

LESSについて！

簡単にLESSという言語についてまとめた記事です。

そもそもLESSとは？

LESSとは、CSSメタ言語というページのスタイルを規定するための言語の1つです。

---

・「CSSメタ言語」
スタイルを規定するCSSの再利用性や保守性を上げるために、様々な追加の関数や文法を加えたもの。
進化したCSS言語と言える。

---

とても簡単にいうと、

「LESS」=「効率的なCSSをかくツール」

ということができる。

LESSに必要な環境

LESSは、「Node.js」の「npm」によって提供されています。
つまり「npm」のインストールは必須です。
下記のURLからインストールできます。
https://nodejs.org/en/

LESSの概念

ここでは、どのようにしてLESSでスタイルをの規定できるのか見ていきましょう。

基本的な流れは以下の通りです。

➀LESSを用いてコードをかく。
➁コンパイルするためのコマンド入力。
➂先ほどのLESSがCSSに変わる。

つまり
「LESSファイル➡コマンド入力➡CSSファイル」
ということです。

LESSの書き方

・「変換コマンド」
LESSのファイルをCSSファイルに変換する時のコードです。

lessc (A) (B)

(A):変換元のファイル
(B):変換先のファイル

・「変数」
LESSでは、変数を作って、そこに属性の値を入れることができます。

変数なし

h1{
  font-size : 10px;
  color : bule
}

h2{
  font-size; 33px
  color : blue
}

変数あり
@color: blue

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

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

・「関数」
LESSには、いくつかの関数が存在します。
今回は色についての関数をご紹介します。

h1の色よりh2の色を20％暗くしたい場合→darken

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

・「階層」
CSSにおいて一見複雑になりがちな「階層」をシンプルに書くことができます。

階層が複雑

header {
    font-size: 30px;
}

header a {
    color: blue;
}

階層を単純化

header {
  font-size: 30px;
}
header a {
  color: blue;
}

・「ミックスイン」
LESSには、ミックスインという考え方があります。
ミックスインとは、「特定の情報を1つの倉庫に管理する」という考え方です。

ミックスインなし

h1 {
  font-size: 58px;
  border: 10px solid red;
  padding: 10px;
}
h2 {
  font-size: 30px;
  border: 10px solid red;
  padding: 10px;
}

ミックスインあり

.h-information{
  border: 10px solid red;
  padding: 10px;
}

h1 {
  font-size: 58px;
  .h-information;
}
h2 {
  font-size: 30px;
  .h-information;
}