Noob LESS/CSS「翻譯」

Question

此代碼將如何轉換爲CSS？

.header-9-sub { 
    .background { 
    background-image: url("/images/header-9.jpg"); 
    } 
} 

Answer 1

這豈不變成：

.header-9-sub .background { 
    background-image: url("/images/header-9.jpg"); 
} 

少了它：

Parent class/ID{ 
    *Style info Here* 
    Child class/ID 1{*Style info Here*} 
    Child class/ID 2{*Style info Here*} 
    h1{*Style info Here*} 
} 

當從少格式化CSS就變成：

Parent class/ID{ 
*Style info Here* 
}  
Parent class/ID Child class/ID 1{ 
*Style info Here* 
} 
Parent class/ID Child class/ID 2{ 
*Style info Here* 
} 
Parent class/ID h1{ 
*Style info Here* 
} 

Answer 2

這裏是您的需求的好工具 - http://less2css.org/

問題的答案：

.header-9-sub .background { 
    background-image: url("/images/header-9.jpg"); 
} 

其他信息：

少即是一個CSS預處理器，這意味着它擴展了CSS語言，增加功能，使變量，混入，功能和許多其他技術，使您可以製作更易於維護，可設置和可擴展的CSS。

運行在Node內部，瀏覽器內部和Rhino內部。還有許多第三方工具可以讓你編譯你的文件並觀察變化。

LESS：

@base: #f938ab; 

.box-shadow(@style, @c) when (iscolor(@c)) { 
    -webkit-box-shadow: @style @c; 
    box-shadow:   @style @c; 
} 
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { 
    .box-shadow(@style, rgba(0, 0, 0, @alpha)); 
} 
.box { 
    color: saturate(@base, 5%); 
    border-color: lighten(@base, 30%); 
    div { .box-shadow(0 0 5px, 30%) } 
} 

CSS：

.box { 
    color: #fe33ac; 
    border-color: #fdcdea; 
} 
.box div { 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
} 

參考 - http://lesscss.org/