Twitter Bootstrapのmixinsを使う

LESSにはmixinsという関数みたいに使える便利な機能があります。CSSフレームワークであるところのTwitter Bootstrapにもこの機能が取り入れられていて、私達開発者も利用できます。

必要なもの

• variables.less と mixins.less ココらへんから取ってきましょう

lessファイルのコンパイル

コンパイルはgruntで行います。

grunt.js

less: {
    src: {
      src: ['src/main/less/*.less'],
      dest: 'war/css/*.css'
    }
}

ここではgrunt-contrib-lessを使用しています。ディレクトリがsrc/main/*なのはSlim3の上で開発しているためです。コンパイルは単純な一対一対応ですが、variables.lessとmixins.lessはコンパイルしないので別のディレクトリに置いておきます(src/main/less/lib)

mixinsを使ってみる

対象

<article>
  <section class="policy">
    <h2>Privacy Policy</h2>
    <p>hoge</p>
  </section>
  <section class="company">
    <h2>Company</h2>
    <p>fuga</p>
  </section>
</article>

src/main/less/main.less

@import 'lib/variables';
@import 'lib/mixins';

article {
  .makeRow();

  section.policy {
    .makeColumn(4);
  }
  section.company {
    .makeColumn(4);
  }
  section.help {
    .makeColumn(4);
  }
}

これでgrunt lessするとそれっぽいcssファイルが生成されてると思います。