Blog

Less multiple backgrounds css snippet

Un petit bout de code LESS pour changer !
Depuis la récente verison 1.3.2, il est possible de mélanger les valeurs multiples dans les paramètres des mixins.
Explication :

Des attributs avec des valeurs multiples :
background-image
background-position

En effet, depuis CSS3, on peut spécifier des images de background multiples, pour peu que l’on se soit donné la peine de bien déclarer tous les paramètres.
Si nous voulons variabiliser tout ça, il faut donc un mélange d’éléments au sein d’un code less :
– Un ou plusieurs backgrounds
– Autant de paires de positions

Évidemment, il est possible de créer une fonction qui va réaliser cette opération, et cela deviendra nécessaire à partir d’un niveau supérieur de complexité – quand par exemple le nombre de backgrounds n’est pas connu !

Bref, avec la 1.3.2 (et toujours avec la 1.3.3) nous pouvons écrire ceci :
.bgs(@bg1;@bg2;@t;@t2){
background-image: url(@bg1),url(@bg2);
background-position: @t, @t2;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.1);
}
h1 {display: inline-block;width: 350px;height: 350px;}
.not{
.bgs("oxbg01.png";"oxbg03.png";15%,80%;60%,75%);
}
.selected{
.bgs("oxbg05.png";"oxbg09.png";6%,22%;82%,63%);
}

Le code est rapide à lire et le plus léger possible.
Comme noté dans la doc, nous avons mélangé les point-virgules et les virgules, il n’est pas toujours très clair de faire la différence entre appel et déclaration dans cette doc officielle, mais on voit bien ici que l’utilisation de la virgule se fait dans l’appel (et dans ce cas, la virgule sert donc à séparer les éléments d’un attribut css).

On pourra même ajouter quelques cas supplémentaires en jouant sur les valeurs par défaut, puisque less va reconnaitre le nombre d’arguments du mixin.
Voilà, amusez vous avec LESS.

admin

Written by

The author didnt add any Information to his profile yet