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

第5回 LESS記法について(上級編:文字列の宣言と編集)

この記事を読むのに必要な時間:およそ 2.5 分

今までの例では変数に色(カラーコード)や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の推奨ルールに従ったほうが良いでしょう。

コラム セレクタ名に変数を使えるのか

今回,変数で文字列を宣言する方法をご紹介しましたが,このセレクタ名を変数で指定できるのでしょうか?

たとえば下記のように,@varでdivタグを宣言して,実際のセレクタの指定箇所に@varを書いてみるとどうなるでしょうか。

//LESS
@var: 'div';
@var {
     background: red;
}

結論から言えば,LESSではこういった宣言はできません。LESSでは

「変数は値としてしか利用できない」

という明確なルールがあるためです。つまり変数は,セレクタだけでなく,プロパティ名としても利用できません。

これらはLESSのライバルであるSassでは利用できる機能であるだけに,少し残念ですね。

著者プロフィール

宇野雄(うのゆう)

UI・UXデザイナー。

ヤフー株式会社にて,主にスマートフォンWebとアプリのUI・UX設計/デザイン/コーディングを担当。

全く新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。犬派。

Twitter:@saladdays

コメント

コメントの記入