LESSで変数と文字を繋げる方法

最近「CSSメタ言語」とか「CSS Preprocessor」といった単語をちらほら見かけたり、CSS Nite でもそれをテーマにした回が開催されていたりして、CSSメタ言語がそろそろWeb制作的キャズムを超えてきたかなぁ、と思っていますが如何でしょう。

ちなみに僕は最初にLESSでお手軽にCSSメタ言語を覚えて、SASSの方がやれることが多いことをしり、SASSに移行して、CodeKit買ってからはどっちでも良くね？になり、最近は Twitter Bootstrap のLESS版を使ってサイトを作ると楽ちんだと知ったので、またLESSに戻っています。

LESSの変数

さて、LESSでは変数という物が使えますね。変数とは、一時的に数値や文字列を憶えておいて、いつでも使えるようにしておくことです。

例えば、こんな感じで使うと良いかもね。

＠blue:     #049cdb;
＠blueDark: #0064cd;
＠green:    #46a546;
＠red:      #9d261d;

これは Twitter Bootstrap の変数をそのまま書いただけですが、こうやってサイトで使う色を何となく固定させておけば、使い回しが効いたりして便利かと思います。

ちなみにこれを使いたい場合はこんな感じです。

a {
  color: ＠blue;
  &:hover {
    color: ＠blueDark;
  }
}

便利ですね。

もちょっと便利に使いたい

こんな便利な変数をもうちょっと便利に使いましょう。例えば、css内に記述する背景画像の置いてあるディレクトリを指定しておく、とかですかね。

// 画像ディレクトリ
＠img-path : "/img/";

これを使う場合はこんな感じになりますかね。

.mainVisual {
  background: url("＠img-pathmainvisual.jpg") no-repeat left top;
  // ※これではエラーになります
}

この記述ではどこまでが変数か分からないのでエラーになります、多分。

変数と文字列を繋げる方法

これは以下のような記述で解決することができます。

LESS
.mainVisual {
  background: url("＠{img-path}mainvisual.jpg") no-repeat left top;
  // ※@{変数名} とする
}

CSS
.mainVisual {
  background: url("/img/mainvisual.jpg") no-repeat left top;
}

こう記述すれば @{ から } までが変数だと認識してくれます。

SASSではどう書く？

ちなみに、SASSではこう書きます。

SASS
$img-path = "/img/";
.mainVisual {
  background: url("#{$img-path}mainvisual.jpg") no-repeat left top;
  // ※#{$変数名} とする
}

SASSはLESSと違い、変数は「$」で表します。そして、文字列の中に変数を入れたい場合は#{ と } で変数を囲む形に記述します。

おわりに

んーと、CSSメタ言語も結構書き方がまちまちで面倒ですね。これを書いた理由も、SASSの書き方は知ってたんですがLESSの書き方は知らなかったんですね、僕。

こういうさ、「CSSメタ言語の記述祭を吸収してくれるコンパイラ」とかできないもんかね。ST2の hayaku みたいに何となく適当に書いたら何となくコンパイルしてくれる的なね。

ま、とはいえ現状でも以前に比べると随分CSSは書きやすくなったと思います。僕は結構前からCSSにはプログラム的な要素があれば良いのに、と思っていて、一時期apacheの設定を変更してCSSファイルを読み込む場合もPHPを通して動的に吐き出したりしてたんですよねー。

でもま、LESSとかSASSとかを書けることよりも、ちゃんと使いやすいCSSを書けることの方がよっぽど大事だと個人的には思うので、僕も含め、そっちがまだだなぁと思う方は、そんな事より先にCSS設計を学びましょうね♪

では。