CSSを構造的に出来、コーディングを高速にする LESS

LESS はCSSをプログラムで使うような記述でCSSを書けるようにするものです
入れ子にもできるので構造的に分かりやすく出来る

例 LESSでの記入

.header {
 margin:10px 5px;
 padding:10px 5px;

 h1 { font-size:15px; }
 h2 { font-size:12px;}
}

CSSに変換されると

.header {
pargin:10px 5px;
padding:10px 5px;
}

.header h1 {
font-size:15px;
}

.header h1 {
font-size:12px;
}

LESSの記述の方法では、親と子の関係が分かりやすく
クラス名を引き継ぐことになるので、長いCSSになればなるほど省略化されて楽になります

また、less.jsを読み込ませて
LESSファイルをリンクタグで指定するだけで利用できるようになります

LESSをそのままWEBで使用することも出来ますが、パフォーマンスの低下につながりますので、一度コンパイルしてLESSをCSS化し、そのCSSファイルを利用することがベストです

コンパイルソフトサードパーティ製 SimpLESS

短縮URL:

2013年09月20日 WEB制作系 CSS LESS

COMMENT