web-dev-qa-db-fra.com

MOINS mélanger un nom de classe variable

J'utilise Font Awesome 4.0.0 et je veux faire quelque chose comme ça en MOINS:

.btn-github {
  .btn;
  .btn-primary;
  margin-left: 3em;

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

Cela ne se compile pas avec l'erreur:

ParseError: Unrecognised input in - on line ...

Est-il possible d'accomplir cela? Cela ferait certainement un beau bouton pour moi.

csstwitter-bootstraplessfont-awesome
23
Peter Sankauskas

Il y a au moins 2 problèmes avec ce que vous essayez de faire ( pour MOINS> = 1.6 voir la mise à jour ci-dessous) :

1) Malheureusement, il n'est pas possible d'appeler un mixin en utilisant l'interpolation de sélecteur.

Avec l'interpolation du sélecteur, LESS s'attend à ce que la construction soit au format suivant:

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

(le sélecteur interpolé peut également avoir une chaîne statique avant ou après l'interpolation)

donc

.@{selector-string};

is Non reconnu par le compilateur LESS. Voir plus ici: Comment puis-je appeler un mixin par référence en MOINS?

2) Un ensemble de règles avec un sélecteur interpolé est directement imprimé dans la sortie CSS et n'existe pas en tant que mixage que vous pourriez réutiliser dans le cadre de LESS

Par exemple:

@foo: test;

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

.bar {
  .test;
}

retournera:

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

Voir plus à ce sujet ici: MOINS CSS: Réutilisation généré. @ {Name} classe en tant que mixin

La solution possible à votre problème serait de redéfinir les règles impressionnantes de la police comme une sorte de mixins réutilisables (sans utiliser d'interpolation). Quelque chose comme ça:

@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 vous n'avez pas vraiment besoin des variables et que vous souhaitez simplement inclure les règles, la meilleure façon serait simplement d'importer la version CSS compilée de FontAwesome (voir réponse ici ):

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

et ensuite vous pouvez simplement utiliser les règles CSS comme les mixins MOINS ou étendre leurs sélecteurs comme bon vous semble et cela devrait fonctionner parfaitement.

Mise à jour:

Depuis MOINS> = 1.6 les règles avec des sélecteurs interpolés sont accessibles en tant que mixins ... donc le formulaire de limitation # 2 ci-dessus ne s'applique plus (mais vous ne peut toujours pas appeler un mixin dynamiquement avec interpolation). Ainsi, vous pouvez simplement appeler MOINS mixins et variables depuis le fichier font-awesome.less Importé comme ceci:

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