Orime

既存のプロジェクト内のCSSをLESSに書き換え

March 22, 2014

【注意】


進行中のプロジェクトのCSSを, LESSに書き換えました.

具体的には, 拡張子を.cssから.lessに変えて, セレクタを入れ子状に直すくらいしかやってないんですが. これからMixin機能やimport機能などの使いどころを探しつつ, 利用していこうと思います.

LESSでセレクタを入れ子状に書くと, 結果的にコードの見た目がHTMLの構造と似かようことになるため, HTMLとLESSを見て間違いに気がつきやすくなっている感じがします.

LESSからCSSへのコンパイルですが現状ではLESS.appを使って即時コンパイルしています. このような使いやすいGUIツールが無料で利用できるのは本当に良いですね.

LESS.app For Mac OS X

リンク先に動画があって, CSSファイルしか無い状態から, LESS.appをプロジェクトに適用していく手順を見ることができます.

動画の中で, 事前にless, cssという名のフォルダを作っておけばCSSが出力されるフォルダが自動的に指定されて便利, とあるのですが, デフォルトではフォルダ検出してくれませんでした.

LESS コンパイルアプリ
LESS コンパイルアプリ

設定画面の“Automatically set CSS output paths when possible”にチェックが入ってるか確認してみてください.

development

Updated: December 12, 2018