BootstrapをLESSで使う方法

Pocket

BootstrapをLESSで使う方法

LESSとは!?

LESSとはCSSプリプロセッサーの1つで、似たようなものにSASSがあります。CSSプリプロセッサを一言で説明すると、CSSをもっと便利に使えるようになるもの。

例えば変数を使ったり、よく書くコードをテンプレート化(Mixin)しておいたり、ネストを使ってセレクタを何度も書く手間を省いたりなどなど。簡単な使い方を以下の記事にまとめているので詳細はそちらをご覧ください。

そんなCSSプリプロセッサですが、BootstrapではLESSが使われています(SASS版もあります)。Bootstrapの主な使い方としては、フレームワークとして読み込んで、HTMLタグにclass名をつける方法だと思いますが、LESSで使うことも可能。

以下にBootstrapをLESSで記述する方法を紹介します。

Bootstrapのソースファイルをダウンロード

まずはファイルをダウンロードします。公式サイトのこちらのページからダウンロードするのですが、今回はコンパイルされた方ではなく、ソースコード側をダウンロードします。
Bootstrapソースコードのダウンロード

ダウンロードしたファイルを解凍すると以下のようになっており、その中にlessファイルが含まれています。
bootstrap-less

BootstrapをLESSで書く準備

LESSを使用するための環境設定などはLESSの書き方・使い方をご覧ください。個人的にはcodekitというツールを使うのがオススメ。
CodeKit

ソースファイルにはいろんなファイルが含まれてますが、ここで必要なのはLESSフォルダのみ。適当な場所にフォルダを作ってその中にコピーします。
bootstrapでLESSを使う

このフォルダ全体をcodekitにドラッグすると、codekitのconfigファイルが出力され、コンパイルの準備は完了です。
bootstrap-less-codekit

次にスタイルシートを用意します。bootstrap.lessをインポートしたstyle.lessを作成します。これで、bootstrapの機能をすべて使えるスタイルシートの出来上がり。

このファイルを保存するとcodekitが自動的にコンパイルして、CSSファイルを出力してくれるという仕組み。ファイルの出力先やLESSファイルの圧縮率などはcodekitのコンフィグ画面で設定できます。
style_less

BootstrapをLESSで書いてみる

では実際に使ってみましょう。lessファイルで設定されているmixinや関数を使ってスタイルを指定していきます。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrai LESS</title>

  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>BootstrapをLESSで使う</h1>
  <div id="container">
    <div id="row">
      <div id="col-xs-4"></div>
      <div id="col-xs-4"></div>
      <div id="col-xs-4"></div>
    </div>
  </div>
</body>
</html>

style.less

@import "less/bootstrap.less";

div{
  height: 200px;
  background-color: #eee;
  &:nth-child(2n+0){
    background-color: #ccc;
  }
}


#container{
  .container;
}

#row{
  .row;
}

#col-xs-4{
  .make-xs-column(4;);
}

ここでは分かりやすくするため、Bootstrapのclass名をid名に置き換えて作ってみました。結果は以下の通りになります。
Bootstrai_LESS-output

HTMLタグにclassは設置していなくても、LESS側で同様の機能を実装することができます。この方法のメリットはid名やclass名を書き換えられないCMSやブログサービスなどでも、CSSファイルをアップロードできればBootstrapと同じスタイルを使えるということです。

ただし、これらに関するドキュメントはほとんどないので、設定されてるMixinや関数についてソースファイルを自分で調べてなければいけないのが難点。

使いどころが難しいですが、LESSの勉強にもなるのでやってみるのもいいかも?