Share
Les dégradés CSS ont une syntaxe assez complexe, ce qui est encore pire une fois que vous avez ajouté des préfixes de fournisseur. Donc, dans ce tutoriel, nous allons rendre la génération de couleur Gradient plus intuitive avec un Mixin LESS.
Notre Mixin prendra en charge trois types de dégradés CSS, à savoir: linéaire, radial, et en répétant. Nous aurons quelques paramètres pour manipuler la sortie du dégradé, y compris le type de dégradé, la combinaison de couleurs et l'orientation du dégradé.
Voici une démonstration de quelque chose que nous pourrons créer avec le mixin résultant:
Voyons maintenant comment nous le construisons!
Pour commencer, nous examinerons la syntaxe qui forme les trois types de dégradés, ce qui nous aidera éventuellement à gérer notre Mixin..
// 1. image de fond de dégradé linéaire: linear-gradient (90deg, # ED4264, #FFEDBC); // 2. image de fond du dégradé radial: dégradé radial (cercle, # ED4264, #FFEDBC); // 3. gradient répétitif (linéaire) gradient-répétitif-linéaire (90deg, # ED4264, #FFEDBC);
Ce sont les formes de syntaxe de dégradé CSS, conformément au standard W3C. Des préfixes de vendeurs seraient nécessaires pour prendre en charge les navigateurs plus anciens..
Gardez à l'esprit qu'il existe une différence entre la manière dont les anciens navigateurs (lorsque vous utilisez la syntaxe préfixée) rend l'orientation du dégradé linéaire..
Auparavant, le 90deg (que nous avons spécifié pour former un dégradé linéaire) s'étendrait sur le dégradé de bas en haut, à partir du # ED4264 à #FFEDBC. 0deg a été interprété comme étant de gauche à droite. Le cahier des charges final, d'autre part, stipule que 0deg est pointant de bas en haut, d'où 90deg couvre le dégradé de droite à gauche à la place.
Des quirks se produisent également avec les valeurs de mot-clé utilisées pour définir l'orientation du dégradé. Les spécifications précédentes utilisaient les mots-clés Haut, la gauche, droite et bas, alors que la version finale ajoute à, Par conséquent en haut, à gauche, à droite, et au fond.
La démo suivante montre deux dégradés de construction égale, chacun utilisant les valeurs 90deg, # ED4264, #FFEDBC. Celui de gauche utilise les préfixes et celui de droite, la syntaxe moderne.
Les valeurs d'angle sont plus fiables pour notre cas. Nous pouvons facilement convertir le comportement de l'ancien angle, malgré la divergence, pour qu'il se comporte comme dans la spécification finale avec une simple soustraction.
x = 90 - y
le y est l'angle que nous avons spécifié pour la syntaxe standard, alors que le X est la valeur à utiliser dans la syntaxe préfixée.
À ce moment-là, créons le Mixin. Nous nommerons notre Mixin simplement .pente(), comme suit:
.dégradé (@ variables) lorsque (@ conditions)
Le Mixin transmettra un certain nombre de variables pour spécifier le type de dégradé, les combinaisons de couleurs, les préfixes de fournisseur pour la compatibilité ascendante et indice, aussi bien que conditions itérer le Mixin.
Nous allons définir les valeurs par défaut pour la direction et les préfixes du vendeur. Par conséquent, à moins que nous voulions changer la direction du dégradé, nous devrons seulement spécifier le type et le couleurs.
Voici une ventilation des valeurs dont nous avons besoin:
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: longueur (@prefixes)) lorsque (@index> 0) .gradient (@type; @colors; @dir; @ préfixes; (@ index - 1)); // le style va ici
Il est à noter que la plupart des fonctionnalités LESS telles que Loop sont enracinées dans Mixins. Donc, bien que nous créions techniquement une boucle ici, nous pouvons toujours l'appeler un mixin. La raison pour laquelle nous utilisons une boucle est parce que nous devons générer plusieurs instances du Contexte ou image de fond propriété pour déclarer le dégradé, comme ceci:
image d'arrière-plan: -webkit-linear-gradient (90deg, rouge, bleu); image d'arrière-plan: -moz-linear-gradient (90deg, rouge, bleu); image d'arrière-plan: -ms-linear-gradient (90 degrés, rouge, bleu); image d'arrière-plan: -o-linear-gradient (90deg, rouge, bleu); image de fond: dégradé linéaire (0deg, rouge, bleu);
Ceci est la syntaxe complète pour générer un dégradé CSS, offrant une solution de secours pour certains navigateurs antérieurs avec une syntaxe préfixée..
Pour générer toutes ces règles, il faudrait d’abord récupérer chaque préfixe défini dans le @prefixes variable et convertir la valeur d'angle définie dans le @dir. Ensuite, nous formons la syntaxe de dégradé avec ce qu'on appelle échappement et interpolation.
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: longueur (@prefixes)) lorsque (@index> 0) .gradient (@type; @colors; @dir; @ préfixes; (@ index - 1)); @prefix: extrait (@prefixes, @index); @ dir-old: 90 - (@dir); background-image: ~ "- @ prefix - @ type -gradient (@ dir-old, @ couleurs)";
Echap est utile lorsqu'il s'agit de générer une syntaxe CSS non standard ou une chaîne arbitraire qui peut ne pas être reconnue par LESS. MOINS affichera le code tel qu'il le trouvera, la seule exception étant les variables interpolées. LESS les remplacera toujours avec leurs valeurs respectives.
Enfin, nous allons générer la syntaxe standard, qui doit être sortie après toutes les valeurs préfixées. Cela indique aux navigateurs qui le prennent en charge de le récupérer à la place de la syntaxe préfixée. Pour ce faire, nous intégrons la syntaxe standard dans Mixin Guard, comme suit:
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: longueur (@prefixes)) lorsque (@index> 0) .gradient (@type; @colors; @dir; @ préfixes; (@ index - 1)); @prefix: extrait (@prefixes, @index); @ dir-old: 90 - (@dir); background-image: ~ "- @ prefix - @ type -gradient (@ dir-old, @ couleurs)"; & when (@index = length (@prefixes)) background-image: ~ "@ type -gradient (@ dir, @ couleurs)";
Nous posons une condition qui va sortir la syntaxe quand le indice de l'itération en cours est égal au nombre de préfixes définis dans @prefixes. Comme l'itération de la boucle commence à partir du plus grand nombre et descend ensuite à 0, la syntaxe standard sera générée avec la première syntaxe préfixée - qui dans ce cas est -o-.
Notre dégradé Mixin est prêt, on peut l'utiliser maintenant!
Comme mentionné, nous ne sommes que Champs obligatoires pour spécifier le type de dégradé et les couleurs, par exemple:
.gradient (linéaire; # 2BC0E4, # EAECC6);
Notez que chaque paramètre doit être séparé par un ;. Nous utilisons une virgule pour lister les couleurs et les préfixes des vendeurs.
Si vous souhaitez personnaliser la couleur, vous pouvez écrire:
.gradient (linéaire; # 2BC0E4, # EAECC6 30%);
La modification de la direction du dégradé doit être effectuée avec une valeur d'angle au lieu de son équivalent mot clé:
.gradient (linéaire; # 2BC0E4; # EAECC6 30%; 180 °);
Voici un exemple dans lequel nous créons un dégradé radial:
.gradient (cercle; # 2BC0E4, # EAECC6);
Générer un dégradé répétitif? Pas de problème:
.gradient (répétitif-linéaire; # 085078, # 2BC0E4 25px, # EAECC6 50px);
Dans ce cas, assurez-vous d’ajuster la taille de fond en conséquence pour voir le résultat souhaité.
Dans ce tutoriel, nous avons créé un Mixin pour rendre la génération de dégradés CSS plus consciente. Nous avons également appris sur s'échapper et interpolation le long du chemin.
De plus, notre dégradé Mixin est un bon exemple d'utilisation de Loop. Au lieu de lister toutes les syntaxes préfixées de cette façon:
.radial (@direction: 50% 50%, @origin: #fff, @end: # 000) background-color: # e9b90f; background-image: -webkit-gradient (radial, direction @, 0, direction @, 200, de (@end) à (@origin)); background-image: -webkit-radial-gradient (@direction, @origin, @end); image d'arrière-plan: -moz-radial-gradient (@direction, @origin, @end); image d'arrière-plan: -o-radial-gradient (@direction, @origin, @end); image d'arrière-plan: -ms-radial-gradient (@direction, @origin, @end); image d'arrière-plan: dégradé radial (@direction, @origin, @end);
… Nous parcourons une liste de préfixes d'une variable, générant chacun d'eux au fur et à mesure. Nous pouvons combiner plusieurs couleurs en combinaison, ainsi que spécifier les arrêts sans restriction. Ce Mixin est vraiment assez flexible.
La seule pièce manquante est la syntaxe propriétaire d'Internet Explorer. DXImageTransform.Microsoft.gradient, bien que j'encourage tout le monde à regarder vers l'avenir et Microsoft Edge à la place!
Accentsconagua