Petit erreur dans un article sure LESS

Je suis certain que je suis pas au bon endroit mais j'ai pas trouvé mieux, genre un lien "signaler une erreur" ou quelque chose comme ça...

Bref dans un récent article sur LESS (amalgamé avec LESSphp qui est just un port du compilateur en Php mais passons) http://www.alsacreations.com/article/lire/1307-des-css-dynamiques-grace-a-lessPHP.html

L'article dit qu'au sein des mixins on peut utiliser les pseudo-classes... En fait nan on ne peut pas (ou du moins pas de la façon dont l'article le présente).

J'utilise LESS depuis un ptit bout de temps et j'ai toujours été persuadé après mes tests que ce n'était pas possible. quelle fût ma surprise en parcourant l'article, dont j'ai ré-essayé... et nan ça ne fonctionne toujours pas:

.mixin() {
    color: red;

    :hover {
       color: blue;
    }
}

a {
    .mixin();
}

devient une fois compilé :

a {
    color: red;
}

a :hover {
    color: blue;
}

Donc il n'est pas possible d'utiliser les pseudos-classes dans un mixin avec LESS (de mémoire c'est possible avec SASS) et euh... ben voilà je voulais juste faire remonter l'info.

PS : j'utilise le compilateur GUI LESS.app donc la différence peut venir de là même si j'en doute puisque de mémoire l'application utilise le compilateur d'origine alors que LESSphp est un port.

Avec SASS c'est effectivement possible ainsi:

@mixin ma-mixin {
    color: red;
    &:hover {
       color: blue;
    }
}
a {
    @include ma-mixin;
}

L'éperluette sera utilisé comme référence de parent. Entre autre, avec des classes conditionnelles, on pourrait écrire:

li {
  display: inline-block;
  .ie7 & {
    display: inline;
    zoom: 1;
  }
}

Modifié par Vaxilart (12 Nov 2011 - 17:18)

Et bien j'ai testé ça...

Et ça fonctionne pareil sous LESS en fin de compte.

Donc ben c'est génial, j'ai vu que la partie sur les pseudos classes avait été retirée, du coup l'idéal serait de la remplacer par une autre (puisque ça fonctionne aussi avec les classes, id et tout le reste dans la panoplie des sélécteurs...

.link() {
  color: red;
  &:hover {
    color: blue
  }
  &.green {
    color: green;
  }
}

a {
  .link();
}

.. qui donnera

a {
  color: red;
}

a:hover {
  color: blue;
}

a.green {
  color: green;
}

Voilà voilà

As-tu le même résultat en utilisant les classes conditionnelles par exemple ?


Concernant les liens, j'avais un peu de difficulté au début à gérer toutes les pseudos classes, et finalement j'utilise désormais la syntaxe suivant les concernants:

a{
  &,
  &:visited {
    // style
  }
  &:hover,
  &:focus,
  &:active {
    // style
  }
}

Le code compilé de cette manière est beaucoup plus clair et ne crée pas de sélecteur du genre:

a:visited:hover

Pour ton exemple je ne sais pas exactement, je n'ai pas de cas similaire, par contre pour des inputs, j'ai pû générer :

input {
  &:disabled {
    &:hover {
      border: none;
    }
  }
}

pour obtenir:

input:disabled:hover...

Je pense que ça revient au même.