Accentsconagua
Share
Dans ce tutoriel, je vais vous montrer comment générer des variables CSS avec Avocode 3. Nous utiliserons une conception importée à partir d'une application de conception telle qu'Adobe XD ou Sketch..
Avocode 3 peut effectivement générer des variables pour les préprocesseurs (Sass, LESS, Stylus, etc.), mais dans un souci de simplicité, nous allons travailler avec des variables CSS natives. Nous allons créer des variables pour les couleurs, la typographie et certaines options de disposition de notre conception. Ce sont les aspects de notre produit final que nous voudrons probablement changer parfois (il ne serait pas très efficace de créer des variables pour tout).
Cette vidéo accompagne mon nouveau parcours, et le design que vous voyez dans la vidéo est tiré de cela. Jetez un coup d'œil si vous voulez en savoir plus sur Avocode:
Si vous avez suivi le cours que vous avez vu, nous avons créé toute une série d'échantillons pour faciliter la création d'un jeu de couleurs, et nous avons nommé chacun d'eux en fonction de leur utilisation dans la conception..
Nuancier en Avocode
Nom de la swatchAvec notre échantillon sélectionné, vous verrez la valeur de couleur réelle affichée dans les propriétés. Dans ce cas c'est # 8b959d, alors mettez en surbrillance et copiez-le.
Sous la valeur que vous avez mise en surbrillance, vous verrez le Variables la fenêtre. Clique le + bouton pour ajouter un nouveau.
Dans la boîte de dialogue qui apparaît, collez la valeur de couleur dans le Texte remplacé champ. Ensuite, dans le Nom de variable champ, entrez le nom de la variable que vous souhaitez utiliser. Maintenant, toutes les occurrences de la valeur de couleur trouvée dans la conception seront remplacées par la variable.
Vous remarquerez que nous avons utilisé _Couleur à la fin de notre chaîne variable. Cela sera utile une fois que nous aurons intégré le code car nous serons en mesure de distinguer un type de variable d'un autre.
Voici comment les variables apparaissent une fois qu'elles ont été définies:
Le même processus s'applique aux autres variables. Là où nous avons utilisé des valeurs hexadécimales pour les couleurs dans le premier exemple, vous pouvez ajouter des noms de familles de polices, des valeurs numériques et tout ce que vous voulez. Ils peuvent tous être remplacés par des variables CSS de la même manière.
Vous pouvez donc utiliser des variables pour la plupart des aspects de votre CSS. Formats, requêtes de supports, unités de mesure, à vous de choisir! Regardez la vidéo pour plus d'explications.
Maintenant, pour une partie très importante de tout cela: exporter le code CSS qui prendra nos variables dans le navigateur. Une fois que toutes vos variables sont prêtes, dans le Variables panneau cliquez sur le Import / Export bouton.
Dans la boîte de dialogue qui apparaît, appuyez sur le bouton Exportation languette. Vous trouverez toutes les variables en attente de votre copie. Vous pouvez ensuite coller les variables dans une feuille de style, mais assurez-vous d'inclure une :racine élément pour les imbriquer tous, comme ceci:
: les variables root / * vont ici * /
Vous trouverez alors peut-être utile d'organiser vos variables dans cette feuille de style afin de faciliter leur gestion (couleurs avec couleurs, variables typographiques les unes avec les autres, etc.)..
C'est ainsi que vous pouvez générer des variables CSS à partir d'un dessin utilisant Avocode! C’est beaucoup plus rapide que de coder manuellement les variables CSS, c’est donc une fonctionnalité très utile que vous apprécierez sûrement..
