[CSS] LESSコンパイラを WinLess から Koala に変更した

SEは頭が固い。
これまでやってきた手法、使っているツールなど、そのまま使い続ける。変えるとなると、普段に加えて労力がいるので、なるべく変えたくはない。よほどのメリットが無いかぎりは、余計なことには手は出さない。

しかし、普段使っている WinLess というツールが、もはやリリースされていないことに気がついた。CSS作成にはずっとLESSを使ってきたから、資産がたくさんある。業務の一部を引き継ぐことになったのだが、渡す前に全て書き換えるのは不可能。新しいLESSコンパイラを探さなければ。

なぜ Less を選択したか

CSSプリプロセッサには、いくつかの種類がある。

プリプロセッサリリース特徴
Sass2006年・一番歴史が古いCSSプリプロセッサ
・CSSとは違う独自の簡潔な構文で記述(rubyに似た構文)
LESS2009年・Sassの構文がCSSと違いすぎるので開発された
CSS構文に沿っており、これに便利な機能を追加したもの
Sass(SCSS)2010年・LESSの影響を受け、Sassに追加された構文形式
・現在はこちらが主流?
Stylus2010年・SassとLESSのいいとこどり
・Sass/SCSSのどちらの記法でも記述できる

サイトの作成/運用を本格的に始めたのは、2010年。だから選択肢は Sass か LESS の二つしかなかった。それまでにCSSを書いていたが、少々面倒になっていた。そんな時にネットで見かけたのが LESS 。その機能は魅力的だった。

Sass も載っていたが、構文が特殊なのが難点だった。便利な機能を覚えるのは仕方ないにして、それ以上の勉強は避けたい。余計なことには手は出さない。という理由だった。

WinLess というコンパイラ

LESSは、コンパイルする必要がある。less.js を読み込めばクライアント(ブラウザ)で動的に利用できるが、ブラウザにあまり負荷はかけたくない。だからコンパイラを探した。

まずは、オーソドックスな方法。これは、開発環境をインストールしてコマンドを打ち込まなければならない。ちょっと面倒だ。

次に、良さそうなGUIツール LESS.app を発見。ただ、残念なことにMac専用。

程なく、それと同等の Windows向けツール WinLess を発見。これで決まり。

起動さえしておけば、LESSファイルを更新する度に自動でコンパイルしてくれる。スタートアップに登録してフルオートに!

今度は Koala

LESS そのものが Sass(SCSS) に取って代わられた事は、知らなかった。WinLess 公式サイトにはすでにツールのダウンロードリンクはなく、サイト更新も2016年で終了している模様。

そこでまた探すことになったが、最終的に落ち着いたのは Koala

主だった機能
① LESSファイルの更新を監視し、自動コンパイルしてくれる機能は必須
② 圧縮してくれるのは当然
③「Autoprefix」を設定するだけでベンダープリフィックスを付与してくれる
④ Sass 、SCSS もコンパイルできる
⑤ 既存の js 、css などを圧縮できる

これは使える! → 当面はこれで決まり。

今後について

LESSに慣れると、CSSにはもう戻れない。しかし、SCCSの方が良さそうにも思える。切り替えるべきか。

さらには、CSSポストプロセッサなるモノもある。やはり新しい事へのチャレンジは必要なのか。

そう言えば、テキストエディタも古いソフトのまま。(TraPad)

VSCode を少しさわってみたら、以前のように重いツールではなくなっていた。PCの性能アップのおかげだと思うが、使いやすそうだから使うべきか。コンパイルやデバッグもできるし。

前向きに検討しよう。

コメント

タイトルとURLをコピーしました