Blog / Article #39

concaténer une variable et une chaine dans le scss avec compass

J'étais en train de bricoler un vieux CSS lorsque je me suis rendu compte que je pourrais bien optimiser mon SCSS en plaçant quelques valeurs dans des variables histoire de pas passer 15 minutes à chercher ou je dois les modifier lorsque j'ai besoin de faire une refonte compulsive. Et puis c'est quand même mieux, notamment pour pouvoir aller plus loin dans la puissance du frontend ou un truc dans le genre, ...on se comprend^^

Et la j'avoue que j'ai été confronté à un blanc mental : merde comment concaténer des variables avec compass pour que ça ne merde pas sur la sortie CSS... Je m'explique :
J'ai une variable $space qui vaut 12 dans mon SCSS.

$space : 12;

Apres le passage dans la moulinette du pre-processeurs Compass, j'aimerais pouvoir ajouter l'unité indépendamment de ma variable car j'aimerais aussi pouvoir effectuer quelques opération classiques dessus, ici et la, du genre $space X 2 pour obtenir le double etc etc

Donc si il existe plusieurs méthodes propres j'ai choisi la méthodes de concaténation dégueulasse, pour afficher en sortie "12px" quand j'envoie dans l'entrée $space px. Le problème c'est l'espace entre la valeur et l'unité, qui n'est pas très appréciée des navigateurs, du coup c'est un petit détail qui devient gênant puisque si j’enlève l'espace dans mon SCSS en amont, j'obtiens la variable $spacepx qui ne correspond absolument à rien et qui provoquera une erreur.

La bonne syntaxe

Bref tout ça pour dire que pour obtenir la bonne syntaxe, il faut entourer la $variable SCSS d'accolades et faire précéder le tout d'un dièse, comme ci dessous.

/* par exemple */
.cool{
    margin-top: #{$space}px;
    margin-bottom: #{$space*2}px;
}

De cette façon, pas d'erreur en sortie et on peut faire des opérations sur les variables. C'est un peu crade quand même, mais ça passe si on reproduit pas ça 70 fois de suite^^