WPの

~ワードプレス関連~

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

   

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

CSS構造のおさらい

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

ルールセット[セレクタ[#id]{ 宣言[プロパティ[font-size]: 値[12px];] }]

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

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

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

ネストの使用例

↓コンパイル

css

&(アンパサンド)

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

less

↓コンパイル

css

変数

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

変数の使用例

less

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

less

↓コンパイル

css

演算

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

less

変数@red(#ff0000)に#007777を加算。

演算の使用例

less

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

↓コンパイル

css

.red-box .pink-box

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

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

セレクタ内

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

less

↓コンパイル

css

URL内

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

less

↓コンパイル

css

プロパティ内

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

less

↓コンパイル

css

変数名で変数を定義

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

less

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

↓コンパイル

css

遅延評価

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

less

↓コンパイル

css

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

Extend(エクステンド)

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

less

↓コンパイル

css

Extend構文

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

less

↓コンパイル

css

mix-in(ミックスイン)

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

ミックスインの使用例

less

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

↓コンパイル

css

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

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

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

less

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

↓コンパイル

css

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

ミックスインのセレクタ

less

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

↓コンパイル

css

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

名前空間

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

less

↓コンパイル

css

保護された名前空間

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

less

↓コンパイル

css

!important

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

less

↓コンパイル

css

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

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

less

↓コンパイル

css

コメント

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

less

インポート

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

less

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

参考:Language Features | Less.js

まとめ

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

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

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

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

 - CSS, WEBデザイン , , ,