Step 6: Download a LESS or Sass Compilerをなぞる
現時点でのboneテーマを使ったサイトはこちら。
boneテーマスタイルは、wp-content/themes/theme-bones-master/library/lessフォルダ内のlessファイルを変更してカスタマイズします。（ディレクトリ構成およびファイルはStep5を試すを参照）
lessに関しては、とほほのLess入門が分かりやすいです。
ツール（WinLESS）は、BonesのスタイルをプロダクションCSSファイルにコンパイルおよび縮小するために必要です。(訳 google先生翻訳)
DOWNLOADボタンを押してインストーラーをダウンロードし実行させ、Winlessをインストールする。
使用方法は、松風さんのブログMach3.laBlogを参照してください。
lessよくわからない
以下 出典ＷＥＢＳＡＥホームページ
CSSの編集
CSSをいじくるのは、上述通りSassがおすすめです。
Sassを知らない人は「library」の中にある「style.css」を編集します。
|– library
| |– css
| | |– admin.css
| | |– editor-style.css
| | |– ie.css
| | |– login.css
| | `– style.css ←コイツ！
でも、せっかくなのでこれを機に一度Sassをトライしてみましょうよ。
1分で。『Sass→Mac』へインストールする手順。
スゲぇと噂のスタイルシート！『Sass』をサクッとブラウザで試すところまでやる。
Sassで編集するファイルは「scssフォルダ」に以下のようにまとまってます。ここも、いじくらなそうなファイルはリストアップしてません。
| |– scss
| | |– admin.scss（管理画面）
| | |– breakpoints
| | | |– _1030up.scss（画面サイズ1030px以上）
| | | |– _1240up.scss（画面サイズ1240以上）
| | | |– _2x.scss（画面サイズ1030px以上）
| | | |– _481up.scss（画面サイズ481px以上）
| | | |– _768up.scss（画面サイズ768px以上）
| | | `– _base.scss（ベースになるスタイル。モバイルファーストってことを忘れずに）
| | |– ie.scss（ie用）
| | |– modules
| | | |– _alerts.scss（アラート）
| | | |– _buttons.scss（ボタン）
| | | `– _forms.scss（フォーム）
| | |– partials
| | | |– _functions.scss（追加機能）
| | | |– _grid.scss（グリッド／レイアウト用）
| | | |– _ie_grid.scss（ie用グリッド／レイアウト用）
| | | |– _mixins.scss（ミックスイン）
| | | |– _print.scss（印刷用）
| | | |– _typography.scss（タイポグラフィ、テキストまわりのスタイル）
| | | `– _variables.scss（変数）
| | `– style.scss（コンパイル後）
デザインをパーツごとに分けてくれてるので、ピンポイントでカスタマイズできますね。
「variables.scss（変数）」や「mixins.scss（ミックスイン）」をうまく利用して、繰り返しの記述を省いたり、頻繁に使うスタイルを使い回す旨味を味わいましょう。CSS一本でカスタマイズするより、うんと速く進められます。
