正常的CSS樣式表寫起來比較繁瑣，用【Less 動態 樣式 語言】模式來寫就方便多了
LESS 將 CSS 賦予了動態語言的特性，如 變量， 繼承，運算， 函數. LESS 既可以在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也可以藉助Node.js或者Rhino在服務端運行。
直接上例子
Global裏都是公共的一些變量和類似於函數的東西，方便後期修改拓展以及減少重複代碼，省時省力
Main裏是樣式主體開始裏面可以直接引用Global定義的變量及函數
- /* -------------------- Global Start -------------------- */
- @bgcolor: #ae1b8d;
- @nav_bgcolor: #000;
- @nav_font: #fff;
- @popbgcolor: #666;
- @popfonthover: #fff100;
- .setSize(@width, @height)
- {
- width: @width;
- height: @height;
- overflow: hidden;
- }
- .setFont
- {
- color:@nav_font;
- font-size:12px;
- }
- .setAlpha(@ie, @nie)
- {
- opacity:@nie;
- filter:progid:DXImageTransform.Microsoft.Alpha(opacity=@ie);
- }
- /* -------------------- Main Start ---------------------- */
- .nav-ch
- {
- .setSize(950px, 25px); background:@nav_bgcolor;
- .skin-box-bd { .setSize(950px, 25px);
- .all-cats a.link{
- height:25px;
- background:@bgcolor;
- .setFont;
- line-height:25px;
- width:85px;
- border:0;
- cursor:pointer;
- span { *margin-left:5px; }
- .popup-icon { background:url(assets/p_w_picpaths/classall_icon.jpg) no-repeat; margin-top: 5px; }
- }
- .menu-list .menu a{
- height:25px;
- background:none;
- .setFont;
- border:0;
- line-height:25px;
- cursor:pointer;
- &:hover { background:@bgcolor; }
- }
- .all-cats-popup
- {
- background:@nav_bgcolor;
- border:0;
- .setAlpha(88, 0.88);
- .cat
- {
- &.cat-hd-hover { background:@popbgcolor; }
- h4 {
- font-weight:normal;
- a { color:@nav_font; }
- }
- .snd-pop-inner { background:@popbgcolor; a:hover { color:@popfonthover; } }
- }
- }
- }
- }
以上樣式運行後生成以下結果：
- /* -------------------- Global Start -------------------- */
- .setFont {
- color: #ffffff;
- font-size: 12px;
- }
- /* -------------------- Main Start ---------------------- */
- .nav-ch {
- width: 950px;
- height: 25px;
- overflow: hidden;
- background: #000000;
- }
- .nav-ch .skin-box-bd {
- width: 950px;
- height: 25px;
- overflow: hidden;
- }
- .nav-ch .skin-box-bd .all-cats a.link {
- height: 25px;
- background: #ae1b8d;
- color: #ffffff;
- font-size: 12px;
- line-height: 25px;
- width: 85px;
- border: 0;
- cursor: pointer;
- }
- .nav-ch .skin-box-bd .all-cats a.link span {
- *margin-left: 5px;
- }
- .nav-ch .skin-box-bd .all-cats a.link .popup-icon {
- background: url(assets/p_w_picpaths/classall_icon.jpg) no-repeat;
- margin-top: 5px;
- }
- .nav-ch .skin-box-bd .menu-list .menu a {
- height: 25px;
- background: none;
- color: #ffffff;
- font-size: 12px;
- border: 0;
- line-height: 25px;
- cursor: pointer;
- }
- .nav-ch .skin-box-bd .menu-list .menu a:hover {
- background: #ae1b8d;
- }
- .nav-ch .skin-box-bd .all-cats-popup {
- background: #000000;
- border: 0;
- opacity: 0.88;
- filter: progid:dxp_w_picpathtransform.microsoft.alpha(opacity=88);
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat.cat-hd-hover {
- background: #666666;
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat h4 {
- font-weight: normal;
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat h4 a {
- color: #ffffff;
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat .snd-pop-inner {
- background: #666666;
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat .snd-pop-inner a:hover {
- color: #fff100;
- }
less非常靈活，樣式結構化，可以定義變量、函數、樣式集合；可以嵌套、支持僞類
less官方網站：http://www.lesscss.net