あかつきのお宿

こいつぁいい！

と、個人的には思ったので、よかったら共有しようぜ。チェキラ。

cssがプログラムを書くように書けるぜ

やり方は至って簡単だから、まずはこのサイトに行ってつべこべ言わずにless.jsをダウンロードしちゃいなよ。

less.js（日本語のページ）

大丈夫。俺のノリは雰囲気が怪しいが、これは怪しくないちゃんとしたjsファイルだから。ウイルスとかないから。



……ダウンロードした？　オッケー。

じゃあ次は、そのファイルをサーバーにアップロードだ。もたもたしてると彼女の作ってくれたアップルパイが冷めちまうぜ。急げ急げ。

アップしたら、読み込みたいhtmlとかに、以下の二行を書く。

ああ、書くのは別にアップルパイ食べてからでも構わないぜ。適度な糖分摂取は疲れた脳にも良いからな。これから俺のクソうざったい長文を読まなきゃいけないんだ。今のうちに脳を休めておいた方が、良いかもしれないぜ。

でもチャンネルはそのままにしといてくれよ。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

さあ、これで準備完了だ。まるでアップルパイのように簡単だろう？　はっはっは。

下のless.jsを読み込む方はいつもと変わらないから大丈夫だと思うけど、上の方、styles.lessを読み込む部分は、通常通りのcssファイルをの読み込みとは若干書き方が違うから、注意が必要だぜ。まあ、とりあえずこれをコピッときゃ間違いない。styles.lessのとこだけ任意に書き換えてくれれば万事オーケーだ。

おっと、拡張子は『.less』で頼むぜ。任意に書き換えるからって、適当な拡張子にしちゃうと動かないぜ。ワイルドかもしれないが、今はワイルドはしまっとけ。今夜の彼女とのゼロ距離戦で存分に発揮してくれ。

もちろん『.css』でも動かないぜ。もし今自分の運営しているサイトでstyle.cssってファイルがあるなら、それをstyle.lessにして読み込むんだ。



どうやらこいつぁ、PHPなんかで言うところの変数とか定数を定義するような感じでCSSが書けちゃうらしい。しょっちゅう使うのとか、あとはクロスブラウザ用の記述とかを共通化できたり、いろいろと便利な点がありそうだから、さっそく俺もいじり倒してみることにしたぜ。

ちょいと長くなっちまうが、行ってみよーやってみよー。

変数を定義するぜ

ずっとこのテンションで行くのもあれだけから口調を普通に戻します。

例えば、テキストとか背景の色を指定するとき、多くの部分で共通の色を使う場合がありますよね。そんなときは、変数で色を定義しといて、共通で使い回すことができる。

@color: #0e84d1;

#header {
  color: @color;
}

#footer {
  color: @color;
}

例えばPHPだと『$color = “#0e84d1″』みたいな感じで変数に値を入れるけど、lessの場合は『@color』が変数扱いになるみたいです。

これで同じ色を指定するところは、変更があったときも一ヶ所修正するだけで良くなっちゃう。お手軽簡単。

ミックスインを定義するぜ

ミックスインって言い方に馴染みがないんでよく分からないんですけど、ようは関数みたいなもんですね。

.border-radius(@radius) {
  -moz-border-radius:@radius;
  -khtml-border-radius:@radius;
  -webkit-border-radius:@radius;
  border-radius:@radius;  
}

#header {
  .border-radius(10px);
}

#footer {
  .border-radius(8px);
}

ほら、ブラウザのバージョンが新しいと必要なかったと思うんですけど、例えば角丸とかって、ブラウザによって違う書き方をしなきゃいけなかったりするじゃないですか。

複数の要素にそれを毎回書くのはめんどい。コピペするとしてもめんどい。

そんなときは、上記のようにfunctionっぽいの（これをミックスインとか言うらしいけど）を作っておけば、それを呼び出すだけで良くなる。なかなか便利っす。

ちなみに、初期値を与えることもできる。

.border-radius(@radius: 10px) {
  -moz-border-radius:@radius;
  -khtml-border-radius:@radius;
  -webkit-border-radius:@radius;
  border-radius:@radius;  
}

#header {
  .border-radius;
}

#footer {
  .border-radius(8px);
}

これだと初期値を10pxにしているから、#headerの方は自動的に10pxの角丸が作られる。ラクショーだね。ハラショーだね。

もちろん、変数を必要としない関数（ミックスイン）も、作れるよ。

.box-shadow() {
  -webkit-box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.5);
  -moz-box-shadow: 2px 2px 10px (rgba(0,0,0,0.5));
  box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.5);	
}

#header {
  .box-shadow;
}

ちなみにこんなことも、やってみたらできた。

@text: #444;

.text-color(@color: @text) {
  color: @color;
}

#header {
  .text-color;
}



//実際に出力されるCSS
#header {
  color: #444444;
}

どうやらミックスインの初期値にあらかじめ作っといた変数を入れることも、できるみたいです。なかなか柔軟性の高いやつだ。

変数の複数定義も、もちろんできる。

.box(@width, @height:100px) {
  widht: @width;
  height: @height;
}

#header {
  .box(960px);
}

#footer {
  .box(960px, 300px);
}



//実際に出力されるCSS
#header {
  width: 960px;
  height: 100px;
}

#footer {
  width: 960px;
  height: 300px;
}

文字列を扱う場合はちょっと注意が必要だぜ

同じ要領で、背景の指定なんかを少しだけ楽にしてみましょう。今回書くのは本当に少しだけだけど、応用すればだいぶ記述が楽になるかもよ。

.b-img(@url) {
  background:url("../images/@{url}") no-repeat;
}

#header {
  .b-img("header.png");
}

#footer {
  .b-img("footer.png");
}

画像の保存先が同じディレクトリなら、こうやっとけば少しだけ書くのが楽になる……ような気がする。

注意が必要なのは『@{url}』って書き方ね。どうやらこう書かないと上手く読んでくれないみたい。コーテーションをちゃんとつけない場合もダメっぽい。

.b-img(@url) {
  background:url(../images/@{url}) no-repeat;
}

.b-img(@url) {
  background:url("../images/"@url) no-repeat;
}

.b-img(@url) {
  background:url("../images/"+@url) no-repeat;
}

この辺の書き方は軒並みNGだった。最後の『+』は、変数の連結とかってどうやるのか分からなかったから適当に試してみたんだけど、やっぱりダメだった。

入れ子を使ってみるぜ

入れ子って言い方もcssに関していえばあまり馴染みがないんですけど……まあ本家がそう言っているので。

よく、idとかclassの中の要素にだけスタイルを当てたいときとか、こんな書き方をするじゃないですか。

p {
  color: #444444;
  font-size: 12px;
}

#header p {
  color: #000000;
  font-size: 14px;
}

#header a {
  color: #0000ff;
}

これを一まとめにすることが、できるみたいです。

#header {
  p {
    color: #000000;
    font-size: 14px;
  }

  a {
    color: #0000ff;
  }
}

ミックスインも良かったけど、個人的には、これ結構便利だなーって思いました。特定のidやclassの中にだけ適用させたいスタイルがたくさんあるときとか、全部にidやclassを書くの、だいぶめんどうだと思ってましたから。

もちろん、これはいくらでも深くすることができる。

#header {
  width: 960px;
  p {
    color: #000000;
    font-size: 14px;
    .title {
      font-weight: bold;
      a {
        color: #0000ff;
      }
    }
  }
}



//実際に出力されるCSS
#header {
  width; 960px;
}

#header p {
  color: #000000;
  font-size: 14px;
}

#header p .title {
  font-weight: bold;
}

#header p .title a {
  color: #0000ff;
}

みたいな感じでね。

いろいろと入れ子のパターンを試してみたぜ

ちなみにこんなこともできる。

a {
  color: #0000ff;
  &:hover {
    color: #00ffff;
  }
  &:visited {
    color: #ffff00;
  }
}



//実際に出力されるCSS
a {
  color: #0000ff;
}

a:hover {
  color: #00ffff;
}

a:visited {
  color: #ff0000;
}

同じ要領で、疑似要素の『::before』とか『::after』とかも指定できるよ。実際やってみたけどちゃんと動作しました。

ただこういう疑似要素とかの場合は『&』をつけなきゃいけないとこだけ注意が必要です。&ってのは、要素を連結させるための記号みたいな感じでして、つまり&をつけずに書くと『a :hover』みたいな指定になってしまう。

以下の場合も同じ。

#header {
  .title {
    font-weight: bold;
  }
}

#footer {
  &.title {
   font-weight: bold;
  }
}



//実際に出力されるCSS
#header .title {
  font-weight: bold;
}

#footer.title {
  font-weight: bold;
}

あとはそう、こんなこともできた。

#header, #footer {
  .title {
    font-weight: bold;
  }
}



//実際に出力されるCSS
#header .title, #footer .title {
  font-weight: bold;
}

こんなのも試してみたけど、さすがにこれは無理だった。

p {
  #header {
    color: #000000;
  }

  #footer {
    color: #cccccc;
  }
}



//出力されてほしかったCSS
#header p {
  color: #000000;
}

#footer p {
  color: #cccccc;
}

まあ、無理だろうとは思っていたんだけど、一応ね……ほら、何でも検証してみるのって大事だからね、うん。





こんなとこですかねぇ……僕がいじってみたのは。

他にも、演算ができたりもっと細かいこともいろいろとできるみたいなんですけど、今回の僕はそこまではやらなかったので、割愛しゃっす。ダウンロードサイトにかなり詳細なドキュメントがあるから、それを見れば分かると思います。

じゃあ、だいぶ長くなってしまったし、今日はこの辺で……。



ああ、そうそう。

変数やミックスインは、後ろに書いても動くっぽいですよ。

#header {
  color: @color;
  .border-radius;
}

@color: #444444;
.border-radius(@radius: 10px) {
  -moz-border-radius:@radius;
  -khtml-border-radius:@radius;
  -webkit-border-radius:@radius;
  border-radius:@radius;  
}

こうやって書いても正常に動きました。

それからコメントアウトは、cssファイルだと『/*—-*/』だったけど、lessの方では『//』でもコメントアウトできるようです。

べ、別に照れてるわけじゃないからねっ。PHPとかでも一行だけのコメントアウトは『//』を使うんだからねっ。