スタイルシートをLESSにかえてみた。

サーバー側の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
画像はCSSをLESSに作り直しをしているところだけれど、視認性が高くファイルサイズが小さくなってるのがよくわかりますねw

本当にこれは使いやすくて良い感じ(`・ω・)b

関連するかもしれない記事



トラックバックURL


スパム対策のためトラックバックURLを動的に生成しています。
生成されるトラックバックURLはコンテンツURLと紐付けされますので、コンテンツURLで指定したサイト以外では使用できませんのでご注意ください。
トラックバックの注意事項などの詳しい説明は About ページを閲覧してください。
「コンテンツURL」を入力し「URL生成」ボタンを押してください。
トラックバックを送る際はあなたの記事やコンテンツにこの記事のURLを書くかリンクしておいてください。
URLがない場合はスパムとして削除され以降の全トラックバックは拒否されます。

コメントを残す

メールアドレスは公開されません、また は必須項目です。
このブログに初めてコメントする方は こちら をご覧ください。


画像認証は待機中です、先にコメント本文を入力して下さい。

コメントを送信しています、しばらくお待ち下さい...
(Akismetスパムデータベース及びブラックリストへの照会を行っています)


キャンセルをした場合でもコメント投稿が完了している場合があります