サーバー側のCSS/JavaScriptをまとめて最適化+難読化するシステムを作り直して、The Dynamic Stylesheet language (LESS)に対応させました。
LESSのコンパイルにはlessphpライブラリを使用。
LESSってナニー?って感じですが、LESSは主に開発者側がCSSを使いやすく、メンテナンスが容易にするためのCSSプリプロセッサなんです。
CSSでネックだった変数、関数、演算が使えるので、開発者からすればCSSの視認性の上昇やコードの短縮ができます。
なのでWebを閲覧するユーザー側からしたら特にメリットはなく、クライアント側コンパイラを使う場合はページ表示速度低下があるのでデメリットしかありません。
しかし、コンパイルをサーバー側でやっておくとユーザー側のストレスはCSSと全く同じ。
これはメンテナンスをし易くするために使ってみねば!という事で・・・
とりあえず、よく使うアンカーエレメントの訪問済みリンクやマウスオーバーの色を指定するやつはこうなります。
CSS
a:link { color: #0d85cc; text-decoration: none; } a:visited { color: #0d85cc; text-decoration: none;; } a:active, a:hover { color: #12a7ff; } |
LESS
a { &:link { color: #0d85cc; text-decoration: none; } &:visited { color: #0d85cc; text-decoration: none; } &:active, &:hover { color: #12a7ff; } } |
少しややこしいCSSのサンプル。
このブログのフォームにも使っているCSSで、inputやtextareaのマウスオーバーやフォーカスを当てた時に縁が変化するやつはこうなる。
CSS
input, textarea, select { color: #666; background: #fff; font-size: 12px; line-height: 18px; } input:not([readonly]):not([disabled]):hover, textarea:not([readonly]):not([disabled]):hover, select:not([readonly]):not([disabled]):hover { background: #f6f6f6; } input:not([readonly]):not([disabled]):focus, textarea:not([readonly]):not([disabled]):focus, select:not([readonly]):not([disabled]):focus { transition-duration: 0.3s; background: #fff; border-color: #75b9f0; outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px #75b9f0; }
LESS
input, textarea, select { color: #666; background: #fff; font-size: 12px; line-height: 18px; &:not([readonly]):not([disabled]):hover { background: #f6f6f6; } &:not([readonly]):not([disabled]):focus { transition-duration: 0.3s; background: #fff; border-color: #75b9f0; outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px #75b9f0; } }
ロケーション疑似クラスを使ってたり複数指定しているCSSは格段に見やすく、そしてシンプルになりますねー!
うちのブログのCSSもLESSにかえてみたら、CSSで62.5Kb、LESSで37.7Kbのファイルサイズに。
LESSをコンパイルすれば同じぐらいのサイズになったので、書き方の違いがあるだけでCSSとLESSをコンパイルした物はかわらなかった。
画像はCSSをLESSに作り直しをしているところだけれど、視認性が高くファイルサイズが小さくなってるのがよくわかりますねw
本当にこれは使いやすくて良い感じ(`・ω・)b
最近のコメント