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/