こんにちは！
最近、暖かかったり寒かったり花粉だったりと、体調を悪化させやすい環境になっていますね‥‥。
職場の人たちも、風邪をひいていたり花粉症だったりと、マスクを着けている人が半分近くいます(´・ω・`)
みなさんも、体調にはお気をつけて。
って、こう気温の上下が激しいと気をつけようが、中々難しいですね（汗）
さて、タイトル通りlessファイルではてなブログのテーマをカスタマイズ中です。
今のテーマに、不満は全然ないんですけど、勉強というほどでもないですけど、ちょっとカスタマイズ欲が出たんで、カキカキ中ですφ(. . )
LESSってなんぞや
ざっくりいうと‥‥
LESSとは、CSSファイルを作りやすくするための仕組みですヽ(´ー｀)ノ
はてなブログのテーマをカスタマイズする時は、デザインCSSに記述するんで、CSS形式に変換する必要があるんで、最初だけちょっと手間がかかってしまいますけど、それだけの価値はあるかなと思います。
例えば、下のようにLESSファイルを編集します。
.categories{ margin-top: 10px; font-size: 14px; a{ margin-right: 4px; color: @text-light; word-wrap: break-word; &:hover{ color: @hover; } &:before{ font-family: "FontAwesome"; content: @fa-var-tag; padding-right: 2px; font-size: 10px; } } }
これを、cssファイルに変換したら、下のようになります。
@fa-var-tag: "\f02b"; .categories { margin-top: 10px; font-size: 14px; } .categories a { margin-right: 4px; color: #999; word-wrap: break-word; } .categories a:hover { color: #0f5373; } .categories a:before { font-family: "FontAwesome"; content: "\f02b"; padding-right: 2px; font-size: 10px; }
階層で、グループして編集したのを、きちんとcss形式にスペースで区切ってくれます！便利！
簡単な解説？
変換前にある、『&』マークは、親に付属（？）する意味になります。
a{ text-decoration: none; &:hover{ text-decoration: underline; } }
は、
a{ text-decoration: none; } a:hover{ text-decoration: underline; }
に、なります。
もう1つ、『@fa-var-tag』というもの。
『@○○○○』は、lessファイル内で、使いまわす項目の値を設定して置くことができます。
文字以外にも、10進数はもちろん、16進数も設定できて、足し算引き算などの計算もできるようです！
‥‥出来るようですというのは、使っていなくてLESSの説明文だけ見ただけだからです（汗）
普通にcssファイルを編集すると、似たものを複数書く必要があるのが、階層ごとで記述できるんで、だいぶ捗ってまます。
sassに触れる前は、なんだか変換の手間が面倒でベタのcssを編集したりしていたんですけど、SASS、LESSに触れると元に戻れなくなりますねヽ(´ー｀)ノ
LESS形式をCSS形式に変換するには
http://less-ja.studiomohawk.com/
公式サイトでは、
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
のように、作成したlessファイルをlink指定して、less.jsというファイルを読み込めば簡単に使用できるとトップで説明されてます。
けど！
CSS形式に変換するには、『使用法＞サーバーサイドでの使用法』の手順をする必要があります。
http://less-ja.studiomohawk.com/#guide
の、ちょっと下に記述されてます。
環境設定！
※ここから、Macの環境での設定方法になります。
変換するには、npmというものが必要となります。 npmとは、Node Package Managerというもので、Nodeとは、Node.jsというものを指します。
なので、まずはNode.jsの動作環境が必要になります。
Node.jsってなんぞやってなると、ながーくなってしまうので省略です！
今回は、Node.jsの動作は必要ないですし！
んで、Node.jsの環境をMacにインストールする必要があり、インストールするには、brewという、また別なものが必要となり、と、なんだか面倒くさくなってきました(´・ω・`)
まずは、大前提のbrewのインストールからしていきます！
brewとは、正式名称Homebrewという、Macに開発環境で必要となるものを簡単にインストールしたりアンインストールしたりと管理するものになります。
インストール方法は、下記を参照で！ qiita.com
だいぶ前に、インストールしたんでやり方覚えてないです(´・ω・`)
上記サイトを、お気に入りに入れていたんで、このやり方でインストールしたはず。
brewをインストールできたら、ターミナルで下記のコマンドを叩いていきます。
$ brew install nodejs
で、npmをインストール
$ npm install -g less $ which lessc
で、やっとLESSの環境をインストールです！！
最後のwhichコマンドで、lesscのパスが出てくれば、無事にインストールが完了です。
brewのインストールを省いたから思ったより短く済んだ！
CSSへの変換方法！
変換するのは、とても簡単です！
そのための、環境設定だったんですからね。
まずは、lessファイルのあるディレクトリへ移動！
$ cd [lessファイルの入っているディレクトリ]
変換するには、下のコマンドを叩くだけです！超簡単！
$ lessc styles.less
これで、同ディレクトリにstyle.cssというファイルが作成されています。
けど！！
いちいちターミナルでコマンドを叩くのは面倒くさいので、最後にSublime Textで変換できるように設定をします。
といっても、Install Packageで、『LESS-Build』というのをインストールするだけです！簡単！
ただ、このパッケージ、だいぶ古いようで、環境によっては設定の書き直しが必要となるようです。
Sublime Text 2 単体でLESSをコンパイルする設定方法 · GitHub
私のMacでは、とくにイジることなく、Sublime Textメニューの『Tools > Build System > LESS』と指定して、『Tools > Build』で同ディレクトリにcssファイルが出力されました。
謎だ(´・ω・`)
