CSS-Less class prolonge la classe avec pseudo classe

Je me demandais comment je pourrais faire quelque chose comme ce qui suit avec moins de css:

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo {
  .btn;
  &:hover {
    .btn:hover;
  }
}

De-sûr, c'est juste un exemple, ce besoin de point est que si il existe un moyen d'étendre la pseudo-classe afin d'éviter de retaper les propriétés de :hover pseudo classe partout où j'en ai besoin. Je sais que je pourrais créer un mixin pour cela, mais je me demandais si je pouvais l'éviter.

Grâce

source d'informationauteur panosru

  1. 31

    Mise à JOUR:
    Si vous ne pouvez pas modifier des fichiers externes simplement redéfinir les sélecteurs, et ajouter manquant états:

    .btn {
  //not adding anything here, won't affect existing style
  &:hover {
    //adding my own hover state for .btn
    background: yellow;
    ...
  }
}

//this will make your foo button appear as in external style
//and have the :hover state just as you defined it above
.btn-foo {
  .btn;
}

    Mieux maintenant? 🙂

    Vous n'avez pas besoin de pseudo-classe. Le tout fonctionne 🙂

    Essayez ceci:

    .btn {
  background: yellow;

  &:hover { //define hover state here
    background: green;
  }
}

button {
  .btn;
}

    Chaque <button class='btn'> élément que vous créez sera hériter de tout ce qui a été défini, y compris l'état de pointage. Je pense que c'est l'une des principales caractéristiques étonnantes de MOINS.

    Espère que cette aide.

  2. 7

    En Moins De 1.4.0(1.4.1?)

    Ce:

    .btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo:extend(.btn all) { 
}

    Se développe pour cela:

    .btn,
.btn-foo {
  color: black;
}
.btn:hover,
.btn-foo:hover {
  color: white;
}

    Être prudent si, c':

    .btn {
  color : black;
}

.btn:hover {
  color : white;
}

.abc .btn {
  margin: 2px;
}

.btn-foo:extend(.btn all) {

}

    Sera de sortie ce:

    .btn {
  color : black;
}

.btn:hover {
  color : white;
}

.abc .btn {
  margin: 2px;
}

.btn-foo:extend(.btn all) {

}

    Je n'ai pas regardé dans le SASS plus d'une demi-heure, mais je crois que le dernier cas est sa valeur par défaut (ou le seul) @étendre comportement.