ウェブデザイナーのためのCSSプリプロセッサーLESSの使い方｜実例とともに機能をチェック！

2017/06/29 2020/04/25

CSSプリプロセッサーLESSの使い方

CSS構造のおさらい

セレクタ	ID・クラス・HTMLタグなど
プロパティ	color,font-size,marginなど
値	プロパティの設定値
宣言	プロパティ+値
ルールセット	セレクタ+すべての宣言

ルールセット[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][セレクタ[#id]{ 宣言[プロパティ[font-size]: 値[12px];] }]

CSSプリプロセッサーLESSの使い方と便利な機能を実例とともに見てみます。

ネストされたルールセット

複数の結合したセレクタを表現するのに入れ子で記述できます。
親セレクタを何度も書く必要がなくなって、位置関係も分かりやすい。
CSSプリプロセッサーの醍醐味、強力な機能です。

ネストの使用例

less

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

↓コンパイル

css

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

&（アンパサンド）

「 & 」をセレクタの前に付けることで、出力する時に親セレクタへくっ付ける。

less

.element {
  &:hover{
    border: 1px solid #cccccc;
  }
  &.class{
    background: #fafafa;
  }
}

↓コンパイル

css

.element:hover {
  border: 1px solid #cccccc;
}
.element.class {
  background: #fafafa;
}

変数

変数とは、値を一定期間記憶し必要なときに利用できるようにするために、値に固有の名称を与えたものです。
「@」の後に変数（固有の名称）を決めて、
コロン「 : 」とセミコロン「 ; 」の間に値を入れます。←ここはCSSと同じですね。

変数の使用例

less

@red: #ff0000;

上記のように定義すると、@redを#ff0000として使い回せて、一括修正も出来ます。

less

@red: #ff0000;

.red-box {
  background-color: @red;
}

↓コンパイル

css

.pink-box {
  background-color: #ff0000;
}

演算

CSSでも「calc()」で計算式が使えますが、
LESSでは変数と合わせて演算が出来ます。
「 + 」「 – 」「 * 」「 / 」を数値、色で使用できる。

less

@red: #ff0000;
@pink: @red + #007777;

変数@red（#ff0000）に#007777を加算。

演算の使用例

less

@red: #ff0000;
@pink: @red + #007777;

.red-box {
  background-color: @red;
}
.pink-box {
  background-color: @pink;
}

CSSクラスの値に変数を入れます。

↓コンパイル

css

.pink-box {
  background-color: #ff0000;
}
.pink-box {
  background-color: #ff7777;
}

.red-box	.pink-box

変数に演算で値を設定していると、変数を変更するだけで連動して変更されるので、手間が省ける。
また、後から見返しても演算の流れから、どうしてその値を設定したのかが明白になる。
例：width:◯px-◯px;など

例えば、あらかじめ、メインカラー/サブカラー/リンクカラー/フォントサイズ/マージン値/パッディング値など
よく使いそうなカラーや数値を1箇所でまとめて変数定義しておくと、コーディングが速くなり、修正もいちいちスクロールして編集箇所まで行かなくても1箇所で変更できて便利です。

セレクタ内

セレクタ内で変数名を波括弧「 { } 」で囲みます。

less

@selector: box;

.@{selector} {
  display: block;
  padding: 25px;
}

↓コンパイル

css

.box {
  display: block;
  padding: 25px;
}

URL内

URL内で変数名を波括弧「 { } 」で囲みます。

less

@images: "../img";

body {
  background: url("@{images}/japanese-paper.png");
}

↓コンパイル

css

body {
  background: url("../img/japanese-paper.png");
}

プロパティ内

プロパティ内で変数を波括弧「 { } 」で囲みます。

less

@property: color;

.note {
  @{property}: #0ee;
  background-@{property}: #999;
}

↓コンパイル

css

.note {
  color: #0ee;
  background-color: #999;
}

変数名で変数を定義

変数内で変数を参照するには、ダブルコーテーション「””」で変数名を囲む。
変数を1つさかのぼるという意味で@を1つ多く付ける気がする（勝手な解釈）。

less

@foo:  "HelloWorld";
@var:    "foo";
span{
  content: @@var;
}

content: @@var;をcontent: @var;にすると、そのままfooが出力される。

↓コンパイル

css

span {
  content: "HelloWorld";
}

遅延評価

変数は使用する前に宣言する必要がない。

less

@var: 0px;
.id {
	padding:@var;
}
@var: 2px;
.id2 {
  padding:@var;
}
.class {
  @var: 1px;
  .brass {
    padding: @var;
  }
  padding: @var;
}

↓コンパイル

css

.id {
  padding: 2px;
}
.id2 {
  padding: 2px;
}
.class {
  padding: 1px;
}
.class .brass {
  padding: 1px;
}

同じ階層(ルールセットの外、ルールセット内、ルールセットのネストなど)の一番下にある変数が最終的な値になる。
同じ階層のことをスコープと言い、
スコープに変数がない場合、親のスコープ（1つ外）の一番下にある変数が採用される。

Extend（エクステンド）

「 &:extend 」を使うと、他のルールセット内セレクタ部分に「，」で区切って追加できる。
追加元ルールセットの宣言部分に「 &:extend() 」を記述し、追加先ルールセットのセレクタを括弧内に入れる。

less

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

↓コンパイル

css

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

Extend構文

「 &:extend 」と同じ動作を構文で行う。
追加元ルールセットセレクタの後に「 :extend() 」を記述し、追加先ルールセットのセレクタを括弧内に入れる。

less

nav ul:extend(.inline) {
  background: blue;
}
.inline {
  color: red;
}

↓コンパイル

css

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

mix-in（ミックスイン）

一度、作成したルールセット（セレクタ+プロパティ+値のこと）のセレクタ名を別のルールセット内宣言部分に記述すると、その宣言「プロパティ+値」を使いまわすことが出来る。

ミックスインの使用例

less

.double-border {
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}
#top h3 {
  color: #444;
  .double-border;
}
#post h2 {
  color: #333;
  .double-border;
}

宣言「プロパティ+値」を記述する部分にセレクタ名を入力し、後ろにセミコロン「 ; 」を付ける。

↓コンパイル

css

.double-border {
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}
#top h3 {
  color: #444;
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}
#post h2 {
  color: #333;
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}

複数の宣言（プロパティ+値）をまとめて（ルールセットごと）使いまわすには最適。

使用方法の流れとしては、元となるルールセットには変数や演算を使い、
そのルールセットのセレクタ名を「他のルールセット内宣言部分に記述（ミックスイン）」。
元となるルールセットに使用した変数は「元のルールセット」と「ミックスインを使用したルールセット」の両方に作用するので一括編集できて簡単、かつ関係性も分かりやすい。

ミックスインの参照元ルールセットを出力しない

less

.double-border() {
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}
#top h3 {
  color: #444;
  .double-border;
}
#post h2 {
  color: #333;
  .double-border;
}

出力したくないルールセットのセレクタの後に「 () 」括弧を付ける。

↓コンパイル

css

#top h3 {
  color: #444;
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}
#post h2 {
  color: #333;
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}

コンパイルすると、ミックスインの参照はされているが.double-borderは出力されていない。

ミックスインのセレクタ

less

.element {
  &:hover {
    border: 1px solid #cccccc;
  }
  .grant{
    background: #fafafa;
  }
}
button {
  .element;
}

参照元のルールセットに擬似クラスやセレクタを含める。（ネスト）

↓コンパイル

css

.element:hover {
  border: 1px solid #cccccc;
}
.element .grant {
  background: #fafafa;
}
button:hover {
  border: 1px solid #cccccc;
}
button .grant {
  background: #fafafa;
}

ミックスインでネストされたルールセット（擬似クラスやセレクタ）も引き継ぐ。

名前空間

複数結合したセレクタやネストされている箇所の宣言を使いたい時には、ミックスインをCSSセレクタのように記述します。

less

#outer() {
  .inner {
    float: left;
  }
}

.element {
  #outer .inner;
}

↓コンパイル

css

.element {
  float: left;
}

保護された名前空間

「保護された」とは条件を満たさないと実行されないという意味。
LESSの「 When 」は、プログラミング言語のif構文のような動作を行います。
「 when () 」の括弧内に条件式を記述し、trueなら実行されます。

less

@mode:hoge;
.mixin { font-size:12px; }
#namespace when (@mode=hoge) {
  .mixin;
}

↓コンパイル

css

.mixin {
  font-size: 12px;
}
#namespace {
  font-size: 12px;
}

!important

ミックスインの後ろに「 !important 」を付けると、すべての値に!importantを付与することができる。

less

.element{
  background: #cccccc;
  color: #333333;
}
.important {
  .element !important;
}

↓コンパイル

css

.element {
  background: #cccccc;
  color: #333333;
}
.important {
  background: #cccccc !important;
  color: #333333 !important;
}

パラメトリックミックスイン

ミックスインは、引数を設定することもできる。
プロパティ値に同じ値があるとき便利。
セレクタ後ろの括弧に変数を定義して、プロパティ値に代入。
ミックスインするときに、括弧内に引数を渡すと、プロパティ値に反映される。

less

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.button {
  .border-radius(5px);
}

↓コンパイル

css

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

コメントは、ブロックとインラインの両方を使用できます。

less

/* 修正するには
コーヒーが必要 */
@var: red;

// 誰もコメントを読んでくれない！
@var: white;

インポート

lessファイルをインポートすると、その中のすべての変数を使用できる。

less

@import "library"; // library.less
@import "test.css";

拡張子を書かない場合、.lessファイルと認識される。

参考：Language Features | Less.js

まとめ

今回はLESSの構文や関数については触れませんが、他にもいろいろな機能があります。

CSSプリプロセッサーはCSSを速く書けたり、後から見返して分かりやすかったりと、開発をスムーズにできるツールで、理解できる機能をぶち込んでいくと逆にわからなくなったりするかもしれません。
理解だけでなく、自分のものとして使える機能だけを使えばいいんじゃないかと思いました。

ネスト
&(アンパサンド)
変数
ミックスイン

ここら辺の基本が使いやすいので、押さえておくと便利です。

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

- CSS, WEBデザイン CSSプリプロセッサー, LESS, 使い方, 機能