CSSはフォントカラーや各所のデザインをまとめておく事が出来る大変便利なものですが凝ったページを作ったり新規ページを作っている間にCSSはどんどん肥大化する・・・なんて事も。
そんな時便利に使えそうなCSS＆JSがありました。
こちら「LESS 」です。
導入は至って簡単でダウンロードしたJSとCSSを読み込むだけ。
ただここからが色々とコツが。
CSSを入れ子にする
例えばdivのクラスでbox、と言うものがあったとします。これをP、ul、tableそれぞれに適用しようとすると
div.box p {}
div.box ul {}
div.box table {}
ってな感じに全てにクラス名を付け加える必要があります。
これを入れ子にする事ができるんです。
div box {
p {}
ul {}
table {}
}
HTMLっぽい書き方になりましたね。これでどの要素がどの親に属しているのか分かりやすくなりました。
変数を使う事も
例えば20pxと言う数値を複数箇所に使っていたとして・・・、
p { padding: 10px; }
ul { margin: 10px; }
table { font-size: 10px; }
ってな感じで同じ数字を
@size : 10px;
p { padding: @size; }
ul { margin: @size; }
table { font-size: @size; }
こんな感じに同一変数で置いておくことができ管理がシンプルに。
全ページのマージンを統一しておいて後で変更かけたい時に便利ですね。
CSS自体便利なためこういった技術を加える事でさらにサイト構築や管理が楽に便利になります。
ご参考までにどうぞ！
雑記
というか変数・関数なんてなってくるとそれってデザイナーの仕事？と言う疑問ははるか彼方に投げ飛ばすことにします。
