Попытка повторного использования существующего класса в lesscss

Question

Я хотел бы создать абстрактное имя класса css.

//icons.less (from icomoon) 
.icon-arrow-down:before { 
    content: "\e600"; 
} 

//abstract class name that re-uses existing class name 
//compiling lesscss fails at this line 
.icon-open-menu:before { 
    .icon-arrow-down:before; 
} 

$ gulp build-less 
[17:30:18] Using gulpfile ~/projects/foo/gulpfile.js 
[17:30:18] Starting 'build-less'... 

events.js:72 
     throw er; // Unhandled 'error' event 
      ^
Error: Unrecognised input in file 
/Users/user/projects/foo/less/icons.less line no. 138 

Я делал это много раз, прежде чем, где я ссылаться на существующий класс как .clearfix;, но это не похоже на работу здесь.

Answer 1

В качестве альтернативы тому, что Jerreck mentioned, вы можете также использовать extend для достижения подобных результатов:

.icon-arrow-down:before { 
    content: "\e600"; 
} 
.icon-open-menu:before { 
    &:extend(.icon-arrow-down:before); 
    color: red; 
} 

Выхода:

.icon-arrow-down:before, 
.icon-open-menu:before { 
    content: "\e600"; 
} 
.icon-open-menu:before { 
    color: red; 
} 

Answer 2

То, что вы не просто класс, это к которому добавлен класс psuedo-selector.

В МЕНЬШЕ, вы можете добавить псевдопользователей-селекторов в селекторов путем вложения их в селекторе с этим синтаксисом:

.icon-arrow-down { 
    &:before { 
    content: "\e600"; 
    } 
} 

Затем вы можете использовать свой класс как примесь, как это:

.icon-open-menu { 
    .icon-arrow-down; 
} 

Вывод:

.icon-arrow-down:before { 
    content: "\e600"; 
} 
.icon-open-menu:before { 
    content: "\e600"; 
}