第2章 変数を活用しよう
登録タグ: CSS スタイルシート 効率化 CSSメタ言語 LESS ダイナミックスタイルシート 変数 使い方
第1章では、LESSがどんなものか、そしてどんな特徴を持ったものなのかを簡単に説明しました。
ここからは、LESSの各機能の具体的な説明と使用方法を例をまじえて説明していきたいと思います。
変数とは?
まず最初は、変数についてです。
何かしらのプログラム言語を触ったことのある方なら説明は不要かと思いますが、念の為に簡単な説明をしておきます。
変数とは一言で言うと、任意の値を入れておける箱のような存在です。
一般的なプログラム言語であれば、数値型(123 など)や文字列型("abc" など)などの値を入れておくことができます。
LESSの場合は、CSS編の第2章で説明した、値に入るものであれば、基本的になんでも入れられると思って大丈夫です。
例えば、以下の様な感じです。
@my-color: #ff0000; // 色の値(赤) @my-color: red; // 色の名前(赤)
上の例では、@my-colorとなっている箇所の@(アットマーク)以降(つまりmy-color)が、変数名になります。
この変数名は、自分の好きな名前をつけることができます。
一見するとこの段階では、「変数って一体どう役に立つのだろう?」という疑問が湧いてくると思います。
既に何らかのプログラミング言語を触ったことのある方なら、もう答えは見えてるかと思いますが、念のためこの疑問に答えてみます。
答えは、「同じ値を何度も記述せずに使い回しできる」です。
実際はちょっと異なるのですが、LESSで初めて変数という概念に触れた方にはこの説明がしっくり来るかと思います。
CSSでスタイルをコーディングしていて、以下の様な疑問を抱いた方は意外と多くいらっしゃるのではないでしょうか。
- 「同じ値を何度も書くのが面倒...orz」
- 「同じ値がいろんな場所に散らかっていると保守が面倒...orz」
LESSにおける変数は、この問題をいとも簡単に解消してくれます。
では実際の具体例を見てみましょう。
@my-color: #ff0000; // ここで色(今回は赤)を設定します h3{ font-size: 18px; // フォントサイズ18pxを設定 color: @my-color; // 変数の値を設定 } p{ font-size: 15px; // フォントサイズ15pxを設定 color: @my-color; // 変数の値を設定 }
上の例のように使用します。
この例ではCSSの機能だけで同じような書き方ができなくもないですが、CSSのコードが複雑で大規模なものになればなるほど、変数の存在が威力を発揮するようになります。
おまけ:CSSの機能だけで書いた場合はこのようになります。
h3, p{ color: #ff0000; // 赤色を設定 } h3{ font-size: 18px; // フォントサイズ18pxを設定 } p{ font-size: 15px; // フォントサイズ15pxを設定 }
カテゴリー:LESS編
2013/05/22 00:57:28 更新