Noob LESS/CSS "translation"

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"); 
} 

Дополнительная информация:

Less является CSS предварительно процессор, а это означает, что он расширяет язык CSS, добавляя новые возможности, которые позволяют переменные, Mixins , функции и многие другие методы, которые позволяют сделать CSS более удобным, удобным и расширяемым.

Меньше работает внутри узла, в браузере и внутри Rhino. Есть также много сторонних инструментов, которые позволяют вам скомпилировать ваши файлы и следить за изменениями.

МИНУС:

@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/