こんにちは。プログラマ小野です。

突然ですがみなさんBootstrap使ってますか？

私は結構お世話になってます。

慣れるまでに多少時間はかかりましたが、同じ見た目・あるいは機能を実現するために書くべきコードの量がBootstrapを使うことで劇的に減ったと個人的には感じています。

（特にhtmlとcss、JavaScriptを行ったり来たりしながらあちこちにコーディングして廻るような修羅場が減りました）

とはいえ提供されているママの状態で要件をすべて満たせる訳ではないので、当然カスタマイズが必要になる場面も出てくるんですが、中でも複数の案件で共通して困ったのが以下のような「Navbarのカラム落ち問題」でして、、、

横幅に余裕がある状態

カラム落ちが発生して項目が2段になっている

メニュー項目がハンバーガーアイコンに格納されている状態（展開中）

BootstrapのNavbarでヘッダー（あるいはフッター）にナビゲーションを作り、ロゴ（画像では「Brand」と文字で書いている箇所）やリンク、検索ボックスなんかを配置した場合、画面幅にある程度余裕があるうちは問題無いんですが、上の画像だと中段の時にカラム落ちが発生してナビゲーションの項目が2段になってしまうんですね。

さらに画面幅が縮まって768px（Bootstrapが規定する最小のブレークポイント）を下回る（画像下段）と、今度はBrand以外の項目が右端のハンバーガーアイコンに格納されるのでレイアウト崩れは発生しません。

根本的にはカラム落ちが発生しないようにNavbarに配置する項目を減らせば問題は解決するんですが、「ハンバーガーアイコンに切り替わるのを、もうひとつ広いブレイクポイント（992px）に変更できないものか」と思い至り、「sassなりlessでスタイルシートをコンパイルしないといけないのかなー大変そうだなー」と思っていたら、案の定sassなりlessでコンパイルしないといけないようです。

公式のドキュメントにも記載がありました。

Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest “small” or “tablet” screen).

参照: http://getbootstrap.com/components/#callout-navbar-breakpoint
という訳で、これまでは避けて通って来たんですが初めてのlessに挑戦してみたいと思います。

sassって何？lessって何？

まずWikipedia的な説明を。

Sass（サース、英: Syntactically Awesome Stylesheets）は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウムが開発したスタイルシート言語である。

参照: Wikipedia 「Sass」

LESS（Leaner CSS）は、Alexis Sellierが設計した動的スタイルシート言語である。 Sassに触発され、後にCSSに似たブロック形式構文を採用した新しいSassの「SCSS」構文に影響を与えている。

参照: Wikipedia 「LESS」

例えば1000pxを基準にいろんな値を算出している巨大なスタイルシートがあって、その1000pxを基準に計算されたプロパティ値が数百箇所、数千箇所に記述されているとします。

ある日「やっぱり1100px基準に変更します」となった場合、大騒ぎになる訳ですが、そんなとき「基準値: 1000px」と定義している1箇所だけを「基準値: 1100px」に変更すれば、他はプログラムが計算してスタイルシートを書き出してくれるのがsassやlessなんです。

特にBootstrapのようなフレームワークのスタイルシートに於いては、全体の整合性を保つためにsassやlessでスタイルシートを管理する必要があるんですね。

sassとlessの違い

sassとlessの違いは、細かく見ていくと「こちらではアレができる」、「あちらではコレが出来ない」と諸々出てくるのですが、ざっくりとはコンパイル（スタイルシートの生成）を実行する言語の違いで、sassはRuby、lessはJavaScriptで動作します。

まずは環境構築（※ 対象はMacです）

lessファイルのコンパイルは「Grunt」と呼ばれるコマンドで実行しますが、Gruntコマンドには「npm」と「node.js」が必要になります。（実際には前提としてnpmとnode.jsをインストールするために「Homebrew」というパッケージマネージャーが必要なんですが割愛）
以降、すべてターミナルでの操作になります。

node.jsをインストールします。

$ brew install node

続いてnpmをインストールします

$ brew install npm

$ node -v
v6.2.0
$ npm -v
3.8.9

無事インストールできました。

引き続きGruntコマンド本体である「grunt-cli」をインストールします。

$ npm install -g grunt-cli

Bootstrapのソースコードをダウンロード

Bootstrapの公式サイトからソースコードをダウンロードします。
（3つ並んでいる真ん中の「Download source」というダウンロードですね）

bootstrap-x.x.x （「x.x.x」はバージョン番号）
  ├─ CHANGELOG.md
  ├─ CNAME
  ├─ CONTRIBUTING.md
  ├─ Gruntfile.js
  ├─ LICENSE
  ├─ README.md
  ├─ _config.yml
  ├─ bower.json
  ├─ composer.json
  ├─ dist
  │   ├─ css
  │   │   └─ bootstrap.css
  │   ├─ fonts
  │   └─ js
  ├─ docs
  ├─ fonts
  ├─ grunt
  ├─ js
  ├─ less
  │   └─ 各種lessファイル
  │
  ├─ node_modules
  ├─ nuget
  ├─ package.js
  ├─ package.json
  └─ test-infra

※ 本記事で触れる部分以外は省略してあります。執筆時点の最新安定版はbootstrap-3.3.6でした。

上記のようなディレクトリが解凍されるのでターミナルのカレントディレクトリをbootstrap-x.x.xに移し、依存パッケージをインストールします。

$ npm install

私の環境（MacBookAir）では結構時間掛かりました。ゆっくり待ちます。

Gruntの実行とlessソースの修正

依存パッケージのインストールが済んだら準備完了です。
Gruntコマンドを実行します。

$ grunt watch
(node:13914) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Running "watch" task
Waiting...

内部的にnode.jsのサーバーが起動し、lessファイルに変更が加えられるのを待ち構えている状態です。

やっと本題、実際にNavbarのブレークポイントを変更するためにlessファイルを編集します。

具体的には「variables.less」の330行目

328 // Navbar collapse
329 //** Point at which the navbar becomes uncollapsed.
330 @grid-float-breakpoint: @screen-sm-min;
331 //** Point at which the navbar begins collapsing.
332 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

「@screen-sm-min」を「@screen-md-min」に書き換えます。（@screen-md-min には、その少し上の行で992pxが代入されています）

lessファイルを変更し、保存した瞬間にnode.jsが反応してコンパイルが実行されます。
（少し感動しました）

＞＞ File "less/variables.less" changed.
(node:13952) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Running "less:compileCore" (less) task
＞＞ 1 stylesheet created.
＞＞ 1 sourcemap created.

Running "less:compileTheme" (less) task
＞＞ 1 stylesheet created.
＞＞ 1 sourcemap created.

Done, without errors.

エラー無く完了できたようです。
コンパイルされたスタイルシートは bootstrap-x.x.x/dist/css/bootstrap.css に出力されます。

実際にはもっと多くの差分が発生していますが、Navbar関連のブレークポイントが768pxから922pxに変更されたことが確認できますね。

環境構築と準備が大半で、作業自体は気が抜けるほど簡単でした。

あとはこのスタイルシートをサーバーにアップロードしてミッションコンプリートです。

おめでとうございます。お疲れさまでしたー。

Gruntの終了

、、、忘れてました、gruntがまだ健気にlessの更新を監視し続けてますね。

ねぎらった上でキチンと終了させてあげましょう。

キーボード「control」＋「c」です。

（「コマンド」＋「c」ではないですよ。tabキーの下のヤツです）

^C

Execution Time (2016-06-20 13:45:47 UTC)
Total 38m 6.9s

今度こそお疲れさまでした。

以上、多少技術っぽくなりましたが、よく考えると結局今月も実質的な「プログラミング」は全く行っていないブログ投稿でした。