concaténer des valeurs en moins (css) sans espace

Donc je suis en train de faire une MOINS mixin qui prend un nombre de degrés de rotation) et la sortie correcte css pour faire pivoter l'élément. Le problème est, je ne peux pas trouver un moyen d'écrire à la fois "270deg" et "3" (270/90) pour IE. Voici les choses que j'ai essayé:

.rotate(@rotation: 0) {
    @deg: deg;
    -webkit-transform: rotate(@rotation deg); //i can see why this doesn't work
    -moz-transform: rotate((@rotation)deg); //parens
    -o-transform: rotate(@rotation+deg); //variable-keyword concatenation
    transform: rotate(@rotation+@deg); //variable-variable concatenation

    //this is the reason I need @rotation to be just a number:
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation/90);
}

.someElement {
    .rotate(270)
}

Pour l'instant j'ai juste modifié le compilateur de script, de sorte qu'il n'a pas mis un espace entre la variable/mot de concaténation. J'espère theres une meilleure solution.

  • Pourquoi ne pas l'appeler comme: .rotate(270deg) ? C'est à cause de l'IE chose?
  • Oui, c'est la cause de l'IE chose
  • Intérêt, quel est le réel avantage de MOINS, ne semble pas vraiment faire une grande différence dans la longueur de code. Certaines fonctions semblent redondants comme la plupart des styles, je travaille ne sont pas dynamiques. Je peux voir que le changement de la valeur d'une couleur en un seul endroit serait bien, mais trouver et remplacer n'est qu'occasionnelle travail d'édition, sans addition (apparemment inutiles) JavaScript charge.
  • Si vous utilisez CSS pour rien, mais les plus élémentaires de style, vous trouverez rapidement qu'il prend presque 0 avantage de code/style de symétrie, et vous oblige à construire difficile à maintenir des styles - surtout si vous avez des styles qui dépendent l'un sur l'autre (permet de dire que vous voulez que la couleur d'un élément à être légèrement plus foncée que l'autre élément, ou vous avez besoin de taille de police, positionnement, etc). Si paramétré mixin comme le .tourner un que j'ai écrit ci-dessus n'est pas piqué votre intérêt, peut-être que les choses que vous travaillez est tellement simple que vous n'avez pas besoin de vous soucier de l'entretien.
  • Oh, je suis aussi à l'aide de less.php - si theres pas de javascript se charger. Le moins est traduite en css, la mise en cache, et envoyé au navigateur à la demande normale de la css. Aussi, avec less.php @importations en moins de tous les traduire en un seul fichier css, afin de ne pas obtenir à l'importation de chaînage avec votre navigateur avoir besoin de demander à chaque enchaîné importer individuellement. Cela réduit à la fois la charge et le temps de latence.
  • au lieu de concaténation, l'utilisation des mathématiques: -webkit-transform(@rotation * 1deg). Sur mon propre projet, j'ai passé environ 30 minutes à essayer de comprendre comment concaténer @num avec % et il vient de me frapper. il suffit de multiplier @num * 1%!!

InformationsquelleAutor B T | 2011-05-17
  1. 36

    Une solution, bien qu'un peu moche, serait utilisé échappé à cordes:

    @degs: ~"@{rotation}deg"
@degs-ie: @rotation / 90;
transform: rotate(@degs);
filter: ~"DXImageBlahBlah(rotation=@{degs-ie})"

    Remarque vous devez less.js v1.1.x pour cette.

    • N'a pas l'air si mal pour moi. Directement de la bouche des chevaux.
    • Oh mais less.php ne prend pas en charge les valeurs d'échappement, donc je vais rester avec ma solution pour l'instant. Je suppose.. côté la question: pourquoi ne concaténation comme @degrés+deg mettre un espace entre eux? Je pense qu'il serait mieux de dire que @x: X;@x+quelque chose qui va de la sortie Xsomething, et puis @x+ quelque chose serait sortie de X quelque chose. Ensuite, vous n'avez pas de cet étrange limitation
    • x + y est en fait pas défini par la langue, lorsque x & y ne sont pas les deux variables contenant des nombres, ou littérale des nombres. deg sur son propre est considérée comme un symbole, comme normal, bold etc, et ceux toujours se tenir sur leur propre. Donc dans ce cas, a + deg est la même chose que a deg. Le + est tout simplement ignoré par la langue.
    • Excellent. C'est exactement ce que je cherchais. Je vous remercie.
    InformationsquelleAutor cloudhead
  2. 24

    Un nettoyant approche consiste à utiliser unit (la documentation officielle):

    unit(@rotation, deg)

    qui, dans votre exemple devient:

    transform: rotate(unit(@transition, deg));

    Documentation:

    (unité de dimension, unité)

    • dimension: Un certain nombre, avec ou sans une dimension
    • unité (facultatif): l'unité de changer, ou si omis de supprimer l'unité de
    • Cela devrait être approuvé réponse.
    • merci pour l'explication sur la suppression des unités. Maintenant, je peux ajouter de l'ensemble des unités d':)
    • Meilleure réponse. Pouvez-vous donner un lien vers les docs? Votre solution fonctionne, mais je ne pouvais pas trouver une référence dans la documentation.
    • J'ai ajouté un lien vers la documentation: lesscss.org/functions/#misc-functions-unit
    InformationsquelleAutor sqren
  3. 3

    Merci cloudhead.
    Depuis l'échappement pour les MOINS de PHP est un peu différent, c'est ce qui a fonctionné pour moi:

    .rotation(@rotation:90){
  @degs: e("@{rotation}deg");
  @degs-ie: @rotation / 90;

  -webkit-transform: rotate(@degs);
  -moz-transform: rotate(@degs);
  transform: rotate(@degs);
  filter: e("progid:DXImageTransform.Microsoft.BasicImage(rotation=@{degs-ie})");
}
    • Cela a sauvé mes fesses. Merci! e() pour la victoire!
    InformationsquelleAutor Timo Hausmann
  4. 0

    Pour quelqu'un qui a trouvé ce vieil article sur la concaténation sans espaces, il y a un bug/demande de fonctionnalités en MOINS #1375 (Ouvert en 2013, fixées, à compter de janvier 2016) qui décrit le problème.

    Problème:

    @CharTinySpace: \\2009;
content: "@CharTinySpace@CharTinySpace";

    De sortie:

    content: " 09 09 ";

    Qui ajoute un espace supplémentaire à l'écran.

    Une solution peut être d'utiliser un JavaScript intégré de remplacement:

    @CharTinySpace: \\2009;
content: `"@{CharTinySpace}@{CharTinySpace}".replace(//g,"")`;

    de Sortie:

    content: "0909";

    Pas la meilleure solution, mais la seule qui a fonctionné dans mon cas où je veux lisible varables au lieu d'échappement unicode valeurs.

    Mise à jour: Merci à sept-phases max, la bonne solution est BEAUCOUP plus simple.

    @CharTinySpace: \\2009;
content: "@{CharTinySpace}@{CharTinySpace}";

    Je pars de ce ici dans le cas où l'option JavaScript est un indice utile à de futurs découvreurs.

    • Tout d'abord ce que votre réponse a à voir avec la question? De toute façon voir démo. Donc, c'est juste que vous le mauvais code, désolé.
    • Il aurait été beau si la documentation a mentionné cette option!! Merci pour la correction, c'est une bien meilleure solution!!
    InformationsquelleAutor millebi