MENOS mixin un nombre de clase variable

Estoy usando Font Awesome 4.0.0, y quiero hacer algo como esto en LESS:

.btn-github { .btn; .btn-primary; margin-left: 3em; i { .@{fa-css-prefix}; .@{fa-css-prefix}-github; .@{fa-css-prefix}-lg; margin-right: 1em; } } 

Eso no se comstack con el error:

ParseError: Unrecognised input in - on line ...

¿Es posible lograr esto? Sin duda sería un botón hermoso para mí.

Hay al menos 2 problemas con lo que estás tratando de hacer ( para LESS> = 1.6 ver la actualización a continuación ):

1) Desafortunadamente no es posible llamar a una mezcla utilizando la interpolación del selector.

Con la interpolación del selector LESS espera que la construcción tenga el siguiente formato:

 .@{selector-string} { property:value; } 

(el selector interpolado también puede tener alguna cadena estática pre o publicar la interpolación)

asi que

 .@{selector-string}; 

no es reconocido por el comstackdor LESS. Vea más aquí: ¿Cómo puedo llamar a un mixin por referencia en LESS?

2) Un conjunto de reglas con un selector interpolado se imprime directamente en la salida de CSS y no existe como una mezcla que se puede reutilizar en la ejecución LESS

Por ejemplo:

 @foo: test; .@{foo} { length: 20px; } .bar { .test; } 

volverá:

  Name error: .test is undefined .bar { .test;} 

Vea más sobre esto aquí: MENOS CSS: reutilización generada. @ {Name} clase como mixin

La posible solución para su problema sería volver a detallar las reglas de fonts increíbles como algún tipo de mixins reutilizables (sin utilizar la interpolación). Algo como esto:

 @fa-var-github: "\f09b"; .fa-mixin() { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-mixin-lg() { font-size: (4em / 3); line-height: (3em / 4); vertical-align: -15%; } .fa-mixin-icon(@icon){ @var: "fa-var-@{icon}"; &:before { content: @@var; } } i { .fa-mixin; .fa-mixin-lg; .fa-mixin-icon(github); } 

Si realmente no necesita las variables y solo quiere incluir las reglas, la mejor manera sería importar la versión comstackda de CSS de FontAwesome (vea la respuesta aquí ):

 @import (less) 'font-awesome.css'; 

y luego puedes usar las reglas CSS como LESS mixins o extender sus selectores como mejor te parezca y debería funcionar perfectamente.


Actualizar:

A partir de LESS> = 1.6 se puede acceder a las reglas con selectores interpolados como mixins … por lo que la forma de limitación n. ° 2 anterior ya no se aplica (pero aún no se puede invocar dinámicamente una mixin con la interpolación). Entonces, simplemente puede llamar a LESS mixins y variables del archivo font-awesome.less importado así:

 i { .fa; .fa-lg; &:before{ content: @fa-var-github; } }