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

PR

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

LESS サイト

 

例 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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー