gihyo.jpサイトのロゴ

LESSで3倍ラクするスマートフォンコーディング

第5回LESS記法について（上級編：文字列の宣言と編集）

2012-08-06

今までの例では変数に色（カラーコード）やpxなどの数値を宣言して扱っていました。前述のカラー関数やMath関数で変換や計算ができるものです。

しかし、LESSでは通常の文字列も変数に代入することができます。

「CSSで文字列？」と思われるかもしれませんが、urlやcontentなど、文字列の出現頻度は意外と高いものです。

CSSの概念からかなり外れた話なのでちょっと難しいかもしれませんが、文字列の宣言から編集の仕方まで、ポイントを1つずつ見ていきましょう。

文字列を宣言するときの注意点

まずは文字列としてそのまま出力されわかりやすい、contentプロパティを用いた例を見てみましょう。

// LESS
 @foo: 'var';
content: '@foo';

「var」という文字列を「@foo」で宣言してcontentの中に入れると、どのように表示されるでしょうか？

想定としては以下のように生成されてほしいですね。

/* Compiled CSS */
content: 'var';

しかし実際は、以下のように「@foo」とそのまま出力されてしまいます。

/* Compiled CSS */
content: '@foo';

これは、他のプログラム言語と同様に、

「'（シングルクォーテーション）や"（ダブルクォーテーション）で囲ったものは、すべて文字列として扱う」

というルールがLESSに存在するからです。

そのため、contentのように文字列を挿入する場合に「'」また「"」が必須な箇所にそのまま@fooなどの変数を入れると、変数もそのまま文字列として生成されてしまうのです。

「'」や「"」の中で変数の値を利用したい場合は、下記の@fooのように、変数名を{}で囲っててください。

// LESS
@foo: 'var';
content: '@{foo}';

/* Compiled CSS */
content: 'var';

変数とプロパティ値、双方に「'」か「"」を付ける

じつは、LESSでは他プログラミング言語のように、明確に数値や文字列を分けて宣言する必要がありません。

文字列に'（シングルクォーテーション）や"（ダブルクォーテーション）をつけなくてもエラーは出ず、そのまま生成できます。

そのため、前述の文字列宣言は、下記のように書いても同じ結果となります。

// LESS
@foo: 'var';     //「'」が付いていると文字列として認識される
content: @foo;     //文字列として認識されているため、「'」が付いた状態で生成される
//LESS
@foo: var;     //varはそのまま代入される
content: '@{foo}';     //代わりにcontent側で「'」を付けてやる

ちなみにこれらの例を見ると、一番始めの変数でもcontentでも「'」を付けている場合は、「⁠'」が二重に付いてしまいそうです。しかし、「⁠'」で括ると「文字列として認識する」という意味であり、適宜LESSが判断するので問題ありません。

LESSの公式サイトでは、変数とプロパティ値、双方に「'」か「"」を付ける方法が推奨されています。CSSやJavaScriptの背景などを考えても、LESSの推奨ルールに従ったほうが良いでしょう。

urlの宣言に活用する

文字列の挿入が一番活かされる例は、urlの宣言ではないでしょうか。

たとえばbackground-imageのurlが、テストサーバーと本番のサーバーで異なるのはよくあることです。そのために相対パスなどを利用するわけですが、大規模サイトではさらに画像データが違うドメインのサーバーに置かれていることもありがちな話です。

そのような場合でも、以下のように記述すれば、複数箇所にbackground-imageがあっても「@base-url」1箇所を修正するだけで対応できます。

//LESS
@base-url: 'http://gihyo.jp';
background-image: url('@{base-url}/images/bg.png');

作業を簡略化できるだけでなく、ミスの削減にもつながりますね。

文字列をエスケープする

CSSでは、時として/（スラッシュ）などの記号をプロパティの値として記述することがありました。特にCSS3では値を複数渡せるプロパティが増えたため、今までのCSSにはなかった方法で記述できます。

今回はわかりやすくborder-radiusを例にとってみましょう。

下記は、水平方向に半径100px、垂直方向に半径50pxの角丸を付ける記述です。

//LESS
border-radius: 100px / 50px;

これはCSS3では正しい記述なのですが、LESSでコンパイルした結果は下記のようになります。

/* Compiled CSS */
border-radius: 2px;

前回ご紹介したように、LESSでは「+」「⁠-」「⁠*」「⁠/」を利用して、数値の四則演算ができます。そのため今回は「100px÷50px」という計算結果が出力されてしまったのです。

これを回避するためには、下記のように~（チルダ）を使って「エスケープ」という処理をします。

//LESS
border-radius: 100px ~'/' 50px;

/* Compiled CSS */
border-radius: 100px / 50px;

本来「'」で囲ったものは文字列として認識されるとご紹介しましたが、それをさらに「~」でエスケープすることにより、「⁠/」を「割る」ではなく「/」という記号のまま認識させることができるのです。

このほか、IEの独自プロパティ（filterなど）も、エスケープすることでLESSに記述できます。

JavaScriptで文字を編集する

そもそもLESSは、JavaScriptやNode.jsなどでコンパイルすることを前提として考えられています。そのため、制限付きながら、LESSファイルの中でJavaScriptを実行できます。

数値計算などは元からLESSで扱えるので、JavaScriptの関数によって文字列を編集するのがおもな活用法です。

まず基本として、JavaScriptの関数を記述する際は`（バッククォート）で対象となる箇所を囲うことを覚えてください。

バッククオートは普段あまり使わない記号ですが、日本語キーボードでは「Shift + @」で入力できます。

例として、文字列を結合してみましょう。

//LESS

@foo: 'Hello';
@var: 'World';

div::before {
     content: `@{foo} + @{var}`;
}


/*CSS*/

div::before {
     content: 'HelloWorld';
}

バッククォートで囲った中で、JavaScriptと同様、文字列を結合できました。文字列として結合させているので、先に説明したように「@foo」ではなく「@{foo}」であることに注意してください。

LESSでよく使うJavaScriptの関数

こういった文字列の結合だけではなく、他にも様々な関数が利用可能です。

JavaScriptの関数の詳細は他記事にゆだねますが、LESS上で筆者がよく使う関数を紹介しておきます。

//LESS

@foo: 'Hello';
@var: 'World';

div::before {
     content: `@{foo}.length`;     //文字列の長さを調べる：4
}
div::before {
     content: `@{foo}.slice(0, 2)`;     //文字列の一部を切り取る："He"
}

div::before {
     content: `@{foo}.match(/He/)`;     //正規表現で該当した部分を取り出す：He
}

div::before {
     content: `@{var}.replace('World','Word')`;     //該当した部分を置き換える："Word"
}

これらの機能は普通にLESSを記述しているだけではあまり使いません。しかし、値として何が用いられるかわからない、つまりmixinを作るときにこそ真価を発揮します。

次回はいよいよ、LESSの真骨頂ともいえる「mixin」の作り方と、mixinを作るときの使えるテクニックをご紹介していきます。

LESSを使いこなしていくためのカギは、いかに自分なりに効率の良いmixinを作っていけるかどうかにあります。mixinをうまく作れるようになれば、までの3倍以上の速さでCSSを書いていくこともできるようになるでしょう。

ぜひお楽しみに！

おすすめ記事

記事・ニュース一覧