LESSでCSSを一つにまとめる

公開:2014-08-18 16:18
更新:2020-02-15 04:37
カテゴリ:visual studio express,wordpressから静的htmlへ,css

VS2013 Express For Web上でLESS

昨日から引き続き、sass(scss)もしくはLESSでライブラリで参照しているcssファイルを1つに統合し、main.cssファイルとして読み込むようにしてみた。 でsassかLESSかどちらを使うか迷ったが、Bootstrapが絡むしnode.js環境もあるし、Web EssentialsでLESSがサポートされているのでLESSを使うことにした。 ただ世間ではsass(scss)を使うことが流行りのようだ。
COMPASSという強力なライブラリがあるしSass(scss)の方が機能が多いことが理由のようだ。特に機能面では継承(extend)有無が大きかったようだが、最近のLESSは対応している。 そういうわけでさっそくLESSファイルを作成してみた。VS2013 + Web EssentialsでがLESSファイルは標準でサポートされており、何もしなくてもインテリセンスが効き、コード・コンパイルが可能である。LESSファイルを作り保存すると自動的にコンパイルされ、.cssファイルと.min.cssファイルができる。 といっても私の場合Bootstraphighlight.jsのcssファイルを結合したいだけなので今のところのソースは以下のようにお粗末なものである。



@import (inline) url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
@import (inline) url('http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css');
ポイントは(inline)のところである。これを指定することでLESSファイル上で指定した外部cssファイルがコンパイル時にインライン展開される。指定しないと普通のcss上の@importだと解釈され、スルーされてしまうので注意する。 これでcssファイルをLESSで1つにまとめることができるようになった。 次はRequire.jsを使った.jsファイルの動的ロードに取り組む。