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*}
}

当它从less格式化为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/

Noob LESS / CSS＆＃34;翻译＆＃34;

2 个答案: