とほほのLess入門

Less とは
Less を使用するには
- クライアントサイド変換方式
- サーバサイド変換方式
コメント
インポート
変数
演算
関数
ミックスイン
ネストルール
親セレクタ
ディレクティブのネスト
スコープ
名前空間とアクセッサ
エスケープ
extend
ループ
値のマージ
リンク

Less とは

Less は、CSS をより使いやすく、よりメンテナンスしやすくするための CSS プリプロセッサです。

Less は Leaner CSS の略です。lean は「無駄のない」、「効率的な」という意味を持ちます。
2009年に Alexis Sellier(@cloudhead)氏によって開発されました。
最初は Ruby で記述され、後に JavaScript に移植されました。
現在(2015年9月13日)時点の最新版は v2.5.1 です。
大半のブラウザは Less を直接解釈できないため、サーバサイドまたはクライアントサイドで CSS に変換する必要があります。
変数を使用できるので、色や幅などの値を一括で変更することができます。
ミックスイン(クラス継承)を利用することにより、定義済みの CSS 定義を簡単に継承することができます。
関数を利用することにより、数学演算や色演算(もう少し明るくなど)を利用することができます。

Less を使用するには

クライアントサイド変換方式

ページを読み込む度にクライアントサイドで Less から CSS に変換するので速度の面では不利ですが、サーバサイド変換方式よりも手軽に Less を試すことができます。Less のファイルを読み込んだ後、less.js (less.min.js) を読み込むことで、Less構文を CSS に変換します。

HTML

<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

less.js は下記からもダウンロードすることができます。

http://lesscss.org/

通常の Chrome ではセキュリティ設定により、less.js をローカルで動かすことができませんが、Chrome の起動オプションに下記を追加することで、実行可能になります。

コマンドプロンプト

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

URL の最後に #!watch を追加すると、less ファイルの更新を監視し、リアルタイムに変更を反映させることができます。

URL

http://～/～/test.html#!watch

サーバサイド変換方式

Lessコンパイラは、Node.js のパッケージマネージャ npm を用いて下記の様にインストールすることができます。

Linux

$ npm install -g less

Less コンパイラ(lessc)を用いて、Less ファイルをコンパイルします。下記の例では、style.less ファイルを style.css ファイルにコンパイル(変換)しています。

Linux

$ lessc style.less style.css

--clean-css オプションをつけると、minified された CSS ファイルを作成することができます。プラグインがインストールされていない場合は、npm で less-plugin-clean-css プラグインをインストールしてください。

Linux

$ lessc --clean-css styles.less styles.min.css

通常の CSS のコメント　/* ... */ に加え、// から行末までもコメントとみなされます。コンパイルすると // コメントは削除されます。

Less

/* ここはコメント */
/*
 * ここもコメント
 */
// ここもコメント
h1 { color: red; }

CSS

/* ここはコメント */
/*
 * ここもコメント
 */

h1 { color: red; }

インポート

@import を用いて他の Less ファイルをインポートすることができます。拡張子を省略するとファイル名.less が読み込まれます。

Less

@import "mystyle";  // "mystyle.less"

* { color: @mycolor; }

CSS



* { color: #469; }

@import に続く (...) の中にいくつかのオプションを指定することができます。オプションは下記などを指定します。

reference - 呼び出し元から参照されたスタイルだけ展開し、未参照の定義を破棄します。
inline - CSSファイルとして単純に読み込みします。CSS非互換ファイルを読み込む際に有効です。
less - 拡張子に関わらず Less ファイルとして読み込みます。
css - 拡張子に関わらず CSS ファイルとして読み込みます。
once - 同名ファイルが指定された場合、一度だけ読み込みます(デフォルト)。
multiple - 同名ファイルが指定された場合、重複して読み込みます。
optional - ファイルが存在する時のみ、読み込みます。

Less

@import (optional, reference) "style.less";

CSS

変数

下記の様に、変数(@変数名) を定義・使用することができます。"..." や '...' の中で参照する際は、@{変数名} と記述します。

Less

@mycolor: #369;
@imgdir: "../image";
h1 {
  color: @mycolor;
  borde: 2px solid @mycolor;
  background: url("@{imgdir}/sample.png");
}

CSS



h1 {
  color: #369;
  border: 2px solid #369;
  background: url("../image/sample.png");
}

セレクタやプロパティ名を変数定義することもできます。この場合も @{変数名} で参照します。

Less

@headers: h1, h2, h3, h4, h5, h6;
@property: color;
@{headers} {
  @{property}: black;
}

CSS



h1, h2, h3, h4, h5, h6 {
  color: black;
}

変数名を変数定義することもできます。

Less

@name: "mycolor";
@mycolor: red;
h1 {
  color: @@name;
}

CSS



h1 {
  color: red;
}

変数を定義する場所は、参照する場所より前でも後ろでも構いません。

Less

h1 {
  color: @mycolor;
}
@mycolor: red;

CSS

h1 {
  color: red;
}

演算

加減乗除などの演算を行うことができます。

Less

.mybox {
  width: 200px * 2;
  color: #888888 / 2;
}

Less

.mybox {
  width: 400px;
  color: #444444;
}

関数

小数をパーセントに変換する percentage(), 彩度を高める saturate(), 色を明るくする lighten() など、数多くの関数を使用することができます。

Less

@mycolor: #f00;
.mybox1 { background-color: lighten(@mycolor, 10%); }
.mybox2 { background-color: lighten(@mycolor, 20%); }
.mybox3 { background-color: lighten(@mycolor, 30%); }

CSS


.mybox1 { background-color: #ff3333; }
.mybox2 { background-color: #ff6666; }
.mybox3 { background-color: #ff9999; }

ミックスイン

ミックスイン(mixin) は、継承用に利用されるクラス定義です。下記の例では、.mybox というミックスインを定義し、これを h4 の CSS 定義で利用(継承)しています。

Less

.mybox {
  border: 1px solid #999;
}
h4 {
  color: #336;
  .mybox;
}

CSS

.mybox {
  border: 1px solid #999;
}
h4 {
  color: #336;
  border: 1px solid #999;
}

引数

下記の様に、引数を受け取るミックスインを定義することができます。

Less

.mybox(@width; @color) {
  border: @width solid @color;
}
h1 {
  .mybox(1px; #666);
}

CSS




h1 {
  border: 1px solid #666666;
}

引数のセパレータ

引数のセパレータにはセミコロン(;) またはカンマ(,)を使用できますが、カンマは他のセパレータとしても使用されることがあるため、引数セパレータにはセミコロンを用いることが推奨されています。

Less

.myfont(@size; @family) {
  font-size: @size;
  font-family: @family;
}
h1 {
  .myfont(9pt; Arial, Courier);
}

CSS




h1 {
  font-size: 9pt;
  font-family: Arial, Courier;
}

引数のデフォルト値

下記の様に、引数にデフォルト値を指定し、名前付き引数を指定することができます。

Less

.mybox(@width: 1px; @color: black) {
  border: @width solid @color;
}
h1 {
  .mybox(@color: #666);
}

CSS




h1 {
  border: 1px solid #666666;
}

引数リスト(@arguments)

@arguments は、すべての引数を参照します。

Less

.mybox(@x:0; @y:0; @blur:1px; @color:#000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
h1 {
  .mybox(@blur:3px);
}

CSS




h1 {
  box-shadow: 0 0 3px #000000;
  -moz-box-shadow: 0 0 3px #000000;
  -webkit-box-shadow: 0 0 3px #000000;
}

残りの引数(@rest...)

@rest... は、残りの引数を参照します。

Less

.mybox(@width; @rest...) {
  border: @width @rest;
}
h1 {
  .mybox(1px, solid, #666666);
}

CSS




h1 {
  border: 1px solid #666666;
}

条件(when)

when (...) により、ミックスインを定義する条件を指定することができます。

Less

@mode: large;
.mybox when (@mode = large) {
  width: 1200px;
}
.mybox when (@mode = small) {
  width: 768px;
}

CSS


.mybox {
  width: 1200px;
}

マッチング

下記の様に、引数にマッチする条件によって適用するミックスインを変更することができます。

Less

.mybox(thin, @color) {
  border: 1px solid @color;
}
.mybox(thick, @color) {
  border: 4px solid @color;
}
h1 {
  .mybox(thin, red);
}

CSS







h1 {
  border: 1px solid red;
}

重要度(!important)

!important を指定すると、CSS 定義に !important が指定されます。

Less

.mybox(@color) {
  color: @color;
}
h1 {
  .mybox(red) !important;
}

CSS




h1 {
  color: red !important;
}

ネストルール

下記の様に、親子の階層をネストして記述することができます。CSS にくらべ、より構造的にスタイルを定義することができます。

Less

#page {
  @mycolor: #469;
  #header {
    color: @mycolor;
  }
  #body {
    color: @mycolor;
  }
  #footer {
    color: @mycolor;
  }
}

CSS



#page #header {
  color: #446699;
}
#page #body {
  color: #446699;
}
#page #footer {
  color: #446699;
}

親セレクタ

& は、親セレクタを示します。

Less

a {
  &:link { color: #369; }
  &:visited { color: #369; }
}

CSS

a:link {
  color: #369;
}
a:visited {
  color: #369;
}

下記の様にして、if 文のような記述をすることができます。

Less

@mode: large;
body {
  & when (@mode = large) {
    padding: 0 20px 0 20px;
  }
}

CSS


body {
  padding: 0 20px 0 20px;
}

ディレクティブのネスト

下記の様に、クラスの中に @media 等のディレクティブを記述することもできます。

Less

.mycolor {
  @media screen {
    color: #f00;
    @media (min-width: 768px) {
      color: #0f0;
    }
  }
  @media tv {
    color: #00f;
  }
}

CSS

@media screen {
  .mycolor {
    color: #f00;
  }
}
@media screen and (min-width: 768px) {
  .mycolor {
    color: #0f0;
  }
}
@media tv {
  .mycolor {
    color: #00f;
  }
}

スコープ

変数のスコープは、通常のプログラミング言語と同様、もっとも内側の { ... } 内で定義されたものが有効になります。

Less

@color: red;
.scopeA {
  @color: green;
  .scopeB {
    color: @color;
  }
}

CSS




.scopeA .scopeB {
  color: green;
}

名前空間とアクセッサ

下記の様にして、いくつかの Mixin を #my_mixins という名前でグルーピングすることができます。グループ中の Mixin を使用するには > を用いますが、> は省略することも可能です。

Less

#my_mixins {
  .color(@color) { color: @color; }
  .border(@color) { border: 1px solid @color; }
}
.mybox {
  #my_mixins > .border(#999);
}

CSS





.mybox {
  border: 1px solid #999;
}

エスケープ

CSS3 の新しい機能や、ブラウザ依存の機能など、Less コンパイラが解釈できず、文法エラーとなってしまう場合、~"..." または ~'...' で Less のコンパイルをエスケープすることができます。

Less

.mybox {
  width: calc(~"100% - 200px");
}

CSS

.mybox {
  width: calc(100% - 200px);
}

extend

&extend(...) を用いることで、単純なクラス名ではないセレクタ (.mytable td など)を継承することができます。

Less

.mytable td {
    color: red;
}
.mytable2 td {
    &:extend(.mytable td);
    border: 1px solid gray;
}

CSS

.mytable td,
.mytable2 td {
  color: red;
}
.mytable2 td {
  border: 1px solid gray;
}

ループ

when と再起呼び出しを用いることでループを実現することができます。

Less

.myloop(@n) when (@n > 0) {
  .col@{n} {
    width: 100px * @n;
  }
  .myloop(@n - 1);
}

.myloop(3);

CSS

.col3 {
  width: 300px;
}
.col2 {
  width: 200px;
}
.col1 {
  width: 100px;
}

値のマージ

プロパティ名の後ろに + をつけると、プロパティ名が重複する場合、値がカンマ(,)で連結されます。

Less

.courier() {
  font-family+: Courier;
}
.helvetica() {
  font-family+: Helvetica;
}
h1 {
  font-family+: Arial;
  .courier();
  .helvetica();
}

CSS







h1 {
  font-family: Arial, Courier, Helvetica;
}

プロパティ名の後ろに +_ をつけると、プロパティ名が重複する場合、値がスペースで連結されます。

Less

.border-width(@width) { border+_: @width; }
.border-color(@color) { border+_: @color; }
.border-style(@style) { border+_: @style; }
h1 {
  .border-width(1px);
  .border-style(sorid);
  .border-color(gray);
}

CSS




h1 {
  border: 1px sorid gray;
}

リンク

初版:2015年9月13日最終更新:2015年9月13日

http://www.tohoho-web.com/ex/less.html