Developers開発の実験等々、クイックサーブのメンバーが好き好きに書き込んでいく場所です。前提となる環境は以下の通り。3.9.1上記環境のインストールについては下記参照Debian8.7にMEAN開発環境を構築するBabel+Gulpで始めるES6LESSとはCSSをロジカルに記述できるメタ言語。通常のCSSを拡張する形で、主に以下の機能が利用できるようになる。豊富な標準関数LESS.jsによる動的なコンパイルLESSは、基本的にコンパイラを用いてデプロイ前に静的に変換するが、コンパイル環境を持たずとも、LESS.jsを用いることでWebブラウザ上で動的にCSSに変換することができる。LESS.jsはCDNから利用できるので、該当のHTMLページでそれをロードし、それより上でLESSのファイルをCSSと同じようにロードする。</head><body></body></html>これで、LESS.jsは読み込まれた時点でリソースに存在するlessファイルをcssに変換する。非常にお手軽ではあるが、ブラウザに変換を任せてしまうこと、コード量が多くなってしまうことから、デプロイ時には静的変換をかけるようにし、LESS.jsの使用は開発中に限ったほうが良いと思われる。gulp-less@3.3.0gulpにタスクを定義ここでは、app/styles/style.lessに変更を検知したら、それをcssに変換し、app/styles/build/style.cssに保存するタスクを記述する。'watch']);これで、gulpコマンド実行時と、実行中にファイルが書き換わった際に自動でコンパイルしてくれるのでコーダーは一切意識すること無くLESSだけを記述することができる。LESS構文例ここからは、LESSの主な機能について特に意味のない極シンプルなコード例を示す。コードは、変換前のlessファイル、変換後のcssファイルの順で掲載する。値の形式で宣言できる。単純な計算や文字列展開も可能。url("/img/bg1");}階層構造化ある要素の子要素にのみスタイルを振ると行った場合に有効。冗長にしか見えないコードを書く必要がない。12px;}ミックスイン(関数)イメージは関数呼び出し?宣言済みのスタイルを取り込むことができる。14px;}継承ミックスインと似ているが、生成されるCSSを見ると分かる通り、こちらのほうがコード量が少なく、親子関係もわかりやすくなる。blue;}豊富な関数LESSには様々な関数が用意されている。個人的には、階層構造化できる点が一番大きい。CSSでいつも冗長な記述をしている気がしてならなかったのでNode環境を用意できなくてもJavaScriptファイルをロードするだけでLESSが使えるというのは大きい。これならデザイナーさんなども手軽に利用できる最近学習した技術と比較しても、覚えることが非常に少なくそれでいてパワフルな生産性を生み出せるコスパの良い技術だと思った。コメントをキャンセルメールアドレスが公開されることはありません。