http://lesscss.org のマニュアルを読みつつ使ってみる

コーディング環境の構築

コーディングは主にvimなのでVundleを使ってプラグインというかシンタックスを入れる。色々あると思うけど、 https://github.com/groenewege/vim-less を使う

んでコーディングガイド的なのは見つからなかったけど、マニュアルを読む限りだと特にインデント周りとかは「スペースインデント(width: 2)」な感じかなーっと思うのでそこら辺もちょいちょい設定

んまぁこれでコーディング周りはオッケー。lesscssをCSSにコンパイルするコマンドのlesscですが、公式ではRubyのlessパッケージ(lesscコマンド)を使ってる模様だけど、Node.jsのnpmでもパッケージが同様にある模様なのでそっち使う

という事で環境構築完了

変数周りな件

@red: #FF0000;
@black: (@red - #F00);
@color: "red";
@bgcolor: @black;

body {
  background-color: @bgcolor;
}

a {
  color: @@color
}

@で変数名定義な感じで、@@を使うとその変数で内容から別の変数を参照して使える模様。で演算も出来るよって話。でlesscでコンパイルすると

body {
  background-color: #000000;
}
a {
  color: #ff0000;
}

な感じでCSSが出力されると。ちなみに変数を""内に書く場合には@{変数名}で書くといいらしい

セレクタ周りな件

.wrapper {

  margin-top: 30px;

  .header {
    height: 80px;
    background-color: blue;
  }

  .main {
    height: 300px;
    background-color: black;
  }

  .footer {
    height: 50px;
    background-color: red;
  }
}

という感じで書くと

.wrapper {
  margin-top: 30px;
}
.wrapper .header {
  height: 80px;
  background-color: blue;
}
.wrapper .main {
  height: 300px;
  background-color: black;
}
.wrapper .footer {
  height: 50px;
  background-color: red;
}

な感じでCSSが出来上がる。で.headerとかがレイアウトヘッダーとかコンテンツヘッダーとか色々種類がありクラスセレクタ的に同一で問題になる場合には

.wrapper {
  &>.header {
    height: 80px;
    background-color: blue;
  }
}

という感じで書いた場合

.wrapper > .header {
  height: 80px;
  background-color: blue;
}

あくまで&は内包されているセレクタを示すのではっていう所、例えば

.header {
  .wrapper & {
    margin-top: 30px;
  }
}

って書いた場合には

.wrapper .header {
  margin-top: 30px;
}

というアウトプット結果が得られる。つまり上記の.less上だと&が.headerを示すっていう事になるんじゃねーかと。ドキュメント的にはconcatinateとかそんな感じで書いてあるけど

mixin

.no-border() {
  border: 0px;
}

.wrapper {
  .no-border();

  .header {
    .no-border();
  }
}

あんま意味ないけど、例えばCSSを定義しといて後で使いまわす的な利用をする事も出来る。でコンパイルすると

.wrapper {
  border: 0px;
}
.wrapper .header {
  border: 0px;
}

こうなる。で上記の.lessだとセレクタなのかmixinなのかわかりづらいけど、カッコ(ブレースじゃないよ)があるか無いかなんじゃないかなーって所。もちろん引数を持つ事も出来る的な

んまぁまだまだ色々ある感じだけど、とりあえずこんな感じで

追記1: mixinと@arguments

例えば

.box(...) {
  box-shadow: @arguments
}

.box2(@a, @b...) {
  box-shadow: @b;
  color: @a;
}

.box {
  .box(2px 5px 1px #000);
  .box2(#000, 2px 5px 2px #000);
}

みたいになってた場合の出力は

.box {
  box-shadow: 2px 5px 1px #000000;
  box-shadow: 2px 5px 2px #000000;
  color: #000000;
}

っていう感じになる。...で可変長引数のように受け取る事が出来るが@argumentsだとマッチした引数全部に入るみたいなので、上記のように可変長引数を@argumentsで取らずに変数定義で参照すれば良いっぽい