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

css code
このエントリーをはてなブックマークに追加
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 ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)