MOINS de transition mixin

Quelqu'un peut-il montrer comment utiliser les MOINS mixin à la transition de la propriété suivante pour .25s avec linéaire facilité?

border-top: 6px solid #ff3300;

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
-webkit-transition-property: @props;
-moz-transition-property: @props;
-o-transition-property: @props;
transition-property: @props;
}

OriginalL'auteur vsiege | 2013-02-20

  1. 28

    Mise à jour: MOINS de 1,4+ Capacité

    Avec MOINS de 1.4, le javascript utilisé dans la réponse originale à cette question pour l'séparées par des virgules, des arguments n'est pas nécessaire. Au lieu de cela, l'utilisation d'un "dummy" point-virgule à la fin de la chaîne de l'argument des causes les virgules à être considérée comme une liste de séparateurs, non de l'argument de séparateurs, de sorte que cela fonctionne maintenant, lorsque l'imputation de multiples transitions:

    MOINS de 1,4+

    Le point-virgule dans le mixin appel (.transition-properties(border-top .25s linear, color .5s linear;);)est très important. S'il est omis, la virgule entre les deux paramètres seront supprimés qui se termine par une défaillance de la règle css.

    .transition-properties(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear, color .5s linear;); /* semicolon is necessary */
}                                                                |
                                                          NOTE THIS SEMICOLON

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

    CSS de Sortie

    Notez la virgule est resté entre les deux valeurs de propriété:

    .yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear, color 0.5s linear;
  -moz-transition: border-top 0.25s linear, color 0.5s linear;
  -o-transition: border-top 0.25s linear, color 0.5s linear;
  transition: border-top 0.25s linear, color 0.5s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

    Réponse originale à cette question [Pre MOINS de 1,4]

    Évidemment, les détails, tout dépendra de vos exacte de mise en œuvre. Cependant, cette illustre, en général, comment vous pouvez l'utiliser:

    MOINS

    .transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
-webkit-transition: @props;
-moz-transition: @props;
-o-transition: @props;
transition: @props;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear);
}

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

    CSS de Sortie

    .yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear;
  -moz-transition: border-top 0.25s linear;
  -o-transition: border-top 0.25s linear;
  transition: border-top 0.25s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

    Voir L'Exemple De Violon

    Explication

    Ce que le 

    @props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;

    vous permet de faire est de mettre dans de multiples séparées par des virgules, des transitions, de dire:

    .transition-properties(border-top .25s linear, color 1s linear);

    Qui permettra de compiler pour les garder séparés par une virgule (juste une ligne par exemple):

    transition: border-top 0.25s linear, color 1s linear;

    Si vous venez d'utiliser la ligne droite @arguments vous vous retrouvez avec pas de virgule de séparation:

    transition: border-top 0.25s linear color 1s linear;

    Qui n'est pas correct pour le bien.

    Il semble qu'il y a une erreur ici: tous à la transition de la propriété devrait être remplacé par de transition puisque vous êtes en utilisant le raccourci avec de multiples paramètres (propriétés de durées et d'assouplissement type).
    c'est une bonne prise. Je n'avais fait que suivre le code d'origine de l'OP (qui avait transition-property) et faites le MOINS de transmettre les valeurs, même pas remarquer que c'était le mauvais "biens" même à appeler pour fixer le calendrier et l'assouplissement. Je vais le réparer maintenant.

    OriginalL'auteur ScottS