Comment commencer avec Sass

Sep 14, 2025
Comment
[dix] [dix] [dix]
[dix]

Toupet est un outil puissant qui apporte de nombreuses fonctionnalités d'autres langages de programmation dans CSS - telles que des fonctions, des variables et des boucles - ainsi que de créer ses propres caractéristiques intuitives telles que des mélanges, des nicheurs et des partiels pour en nommer quelques-uns.

[dix]

Dans ce didacticiel, nous créerons des icônes sociales à l'aide de boucles Sass, de mixes et de fonctions. Nous utiliserons également la puissant nidification disponible en SASS.

  • Qu'est-ce que Sass?

Nous créerons une liste dans SASS pour générer nos icônes sociales, qui consisteront au nom de classe, référence de la police et de couleur d'abord - et plus tard dans l'info-bulle.

Et nous utiliserons des mixines pour créer des requêtes de média réutilisables et créer une fonction pour transformer une valeur de pixel en une valeur EM. Pour ce faire, nous créerons également une variable pour notre taille de police de base.

Il existe plusieurs façons d'installer et d'utiliser Sass en fonction de votre système et de vos besoins d'outils de construction - plus de détails peuvent être trouvés. ici - Cependant, nous utiliserons CodePen pour compiler notre SASS dans CSS pour que les choses soient aussi simples que possible.

[dix]

Pour exploiter vraiment la puissance de Sass et ne pas vous mettre dans un gâchis de spécificité et de complexité, une compréhension solide de CSS est requise. La saveur particulière des Sass Nous utiliserons est SCSS (Sassy CSS), ce qui signifie que nous utiliserons toujours les crochets {} dans notre code SASS.

Obtenez les fichiers de tutoriels

Pour télécharger les exemples de fichiers de ce didacticiel, allez à Fichiers , sélectionnez des trucs gratuits et un contenu gratuit à côté du tutoriel. Remarque: la première fois que les utilisateurs devront s'inscrire pour utiliser FileSilo.

01. Configurez votre CODEPEN CSS

Getting your CodePen CSS set up correctly is key

[dix] [dix]
Obtenir votre code CSS CodePen CSS correctement est la clé

La première chose que nous devrons faire est créer un nouveau stylo et modifiez certains des paramètres par défaut de l'éditeur CSS dans CodePen. Nous allons changer le prétraiteur CSS en SCSS et allumerons Normaliser et Autoprefixer.

02. Commencez à écrire du code

Maintenant, nous avons tout mis en place, nous pouvons commencer à écrire du code. Dans l'éditeur HTML, nous créerons un conteneur et un nombre d'éléments à l'intérieur contenant le lien et l'icône pour chacune de nos icônes.

Les noms utilisés ici seront utilisés dans notre liste SASS comme référence en CSS. Nous utiliserons également la convention de nommage BEM pour nos noms de classe. 

 & lt; div class = "social__container" & gt;
  & lt; div class = "social__item" & gt;
  & lt; une cible = "_ vide" href = "..."
  Classe = "Social__icon - Twitter" & GT;
  & lt; i class = "icon - twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div et gt;
  ...
& lt; / div et gt;

03. Définir les styles de base

En passant à l'éditeur CSS, nous commencerons par exemple en incluant Font-Awesome, définissant une variable pour notre taille de la police de base et des styles de base pour la page. 

 @import URL (http://srt.lt/w8yt8);
// variables
$ base-de la police: 16px;
// style de base
corps {
  Taille de la police: $ de la base de la police;
  ...
}

04. Créer une fonction de base

Ensuite, nous créerons une fonction de base pour transformer une valeur de pixel sur une valeur EM en utilisant notre variable «$ de la taille de la police».

Les fonctions en SASS sont créées à l'aide de «@function» suivie du nom de la fonction et de l'entrée utilisée pour effectuer la fonction.

Ensuite, à l'intérieur de la déclaration, nous utilisons "@return" pour émettre la valeur lorsque vous utilisez la fonction. Le '# {}' entourant le calcul est utilisé pour interpolation . 

 // Fonctions
@fonction px-to-em ($ pixels) {
@retour # {$ pixels / $ base-de la police-la taille} EM;
}

05. Faire des mélanges

En poursuivant notre configuration, nous créerons des mixines pour des requêtes simples de médias mobiles à l'aide de notre fonction 'PX-TO-EM', que nous transmettrons dans une valeur PX pour renvoyer une valeur EM.

Les mélanges sont créées à l'aide de '@MIXIN' suivi d'un nom pour le mixin. Ensuite, à l'intérieur de la déclaration, nous utilisons '@Content' pour émettre le code que nous mettons à l'intérieur du mixin lorsque vous l'appelez plus tard dans notre codeBase. 

 @Mixin Viewport - Grand {
  @media seul écran et
  (min-largeur: px-to-em (1680px)) {
  @teneur;
}}
@Mixin Viewport - Medium {
  @media seul écran et
  (min-largeur: px-to-em (1080px)) {
  @teneur;
}}

06. Configurez une liste de sasses

La dernière étape de notre configuration consiste à créer une liste. Les listes de sass sont créées à l'aide d'une variable; Après cela, la syntaxe exacte est assez lâche, acceptant une grande variété de façons de le définir .

À l'intérieur de la variable, nous définirons le nom de la classe, la valeur Unicode et la couleur pour chaque icône, les séparant d'une virgule, entre parenthèses. 

 $ Icône-liste: (
  Vimeo "\ f27d" # 1ab7ea,
  Twitter "\ f099" # 1da1f2,
  ...
  github "\ f113" # 333,
  RSS "\ f09e" # F26522
);

07. Affichez vos icônes dans une rangée

Pour que nos icônes sociales affichent dans la ligne, nous ajouterons un CSS simple à chacun de leurs conteneurs. 

 .Social__item {
  Affichage: Inline-Block;
  Marge-droite: 0.05ème;
}

08. Créer un style d'icônes partagé

Pour minimiser la quantité de CSS que nous publierons, nous utiliserons un sélecteur CSS3 pour trouver toutes les classes commençant par "icône" et créer un style partagé pour eux. 

 [Classe ^ = "Icône"] {
  Font-famille: 'fontawesome';
  Parle: Aucun;
  Style de police: normal;
  Poids de la police: normal;
  Font-Variant: normal;
  Texte-transformation: aucun;
  hauteur de ligne: 1;
  -WebKit-Font-lissage: antialiasé;
  -MOZ-OSX-Font-lissage: niveaux de gris; }

09. Style up bouton arrière-plan

En utilisant la même méthode, nous ferons la même chose pour les boutons définissant nos valeurs dans 'em', ce qui nous permet de les redimensionner ultérieurement à l'aide du conteneur. 

 [Classe ^ = "Social__icon"] {
  Taille de la police: 1em; largeur: 2em; Hauteur: 2em;
  Couleur de fond: # 333;
  Couleur blanche;
  Texte-Décoration: Aucun;
  Rayon frontalier: 100%;
  Texte-Aligner: Centre;
  Affichage: flex;
  Align-items: centre;
  Justify-Content: Centre;
}

10. @each boucle pour nos icônes

We’ve used our loop to generate the icons for each of our social icons

[dix] [dix]
Nous avons utilisé notre boucle pour générer les icônes pour chacune de nos icônes sociales

Nous avons maintenant tous nos styles de base que nous pouvons utiliser notre liste pour générer le CSS spécifique à chaque icône.

Pour créer une boucle dans Sass, nous utilisons "@each" suivi de noms pour chaque valeur de chaque élément - "$ icon", "$ unicode 'et" $ icon-fond "- suivi du mot" in "puis du nom de la liste.

À l'intérieur de la boucle, nous appliquerons la valeur "$ Unicode" à l'élément pseudo "avant" de chaque icône que nous avons créée dans le HTML, permettant au style partagé que nous avons créé précédemment de prendre soin de tous les autres styles nécessaires. 

 @each $ icon, $ unicode, $ icon-fond
en $ icon-liste {
  .icon - # {$ icon} {
  & amp; :: avant {
  Contenu: $ Unicode;
  }
  }
}

11. @each boucle pour nos couleurs de fond

We’ve added the background colours as well as the icons to our '@each' loop

[dix] [dix]
Nous avons ajouté les couleurs d'arrière-plan ainsi que les icônes à notre boucle '@each'
[dix]

Les icônes travaillent désormais tous, mais nous avons toujours la couleur de fond de ballon. Nous ajouterons un autre code à notre liste pour résoudre ce problème. En utilisant la même méthode que ci-dessus, nous émettrons le nom «$ icon», mais cette fois sur les classes «social__icon» et à l'intérieur de la couleur «$ icon-fond». 

 @each $ icon, $ unicode, $ icon-fond
en $ icon-liste {
  ...
  .Social__icon - # {$ icon} {
  Couleur de fond: $ icon-fond;
  }
}

12. Utilisez les mélanges

Using our mixins we've updated the font size of the container to change the icons size depending on the viewport width

[dix] [dix]
En utilisant nos mélanges, nous avons mis à jour la taille de la police du conteneur pour modifier la taille des icônes en fonction de la largeur de la fenêtre.

Utilisation des mixines que nous avons créées précédemment et parce que nous avons conçu les icônes à l'aide de valeurs «EM», nous pouvons appliquer une taille de police au conteneur et l'augmenter à l'aide de notre mixin de requête multimédia à l'aide de «@inclu» et le nom du mixin suivi de la code que nous voulons inclure dans la requête médiatique. 

 .Social__Container {
  Taille de la police: 1em;
  @include Viewport - Medium {
  Taille de la police: 1.5EM;
  }
  @include Viewport - Grand {
  Taille de la police: 2EM;
  }}

13. Ajouter des états d'interaction et des fonctions intégrées

Nous pouvons ajouter une certaine interactivité à nos boutons en modifiant la couleur d'arrière-plan lorsque le bouton est interactif avec l'utilisation de la souris ou du clavier.

Sass a un certain nombre de Fonctions de couleur intégrées Nous nous permettant de prendre la couleur de fond que nous avons définie dans notre liste et de la mélanger avec de noir pour assombrir le bouton - lorsqu'il est interagi avec. 

 Icône - # {$ icon} {
  Couleur de fond: $ icon-fond;
  & amp;: plancher,
  & amp;: focus,
  & amp;: actif {
  Couleur de l'arrière plan:
  mélanger (noir, $ icon-fond, 15%);
  }}

14. Transition de la couleur de fond

Nous pouvons également utiliser la propriété "Transition" dans CSS pour animer les différences entre les couleurs d'arrière-plan. Nous pourrions utiliser la valeur «TOUT», mais qui est à la fois coûteuse en termes de performances et ne nous permettrait pas de transition de différentes valeurs à différents horaires et fonctions de synchronisation. 

 [Classe ^ = "Social__icon"] {
  ...
  Transition: couleur de fond
  150ms apaisants
  ;
}

15. Ajouter d'autres effets de transition

En ajoutant un positionnement «relatif» aux boutons et à une valeur supérieure et en ajoutant «haut» à notre propriété 'Transition', nous pouvons préparer les éléments pour une interaction supplémentaire. 

 [Classe ^ = "Social__icon"] {
  Position: relatif;
  TOP: 0;
  ...
  Transition: couleur de fond
   150ms Facilité-in-Out,
    Top 250ms linéaires
  ; }

16. Déplacer les boutons sur l'interaction

Pour cette interaction, rien de spécifique nécessaire pour le créer, nous pouvons donc ajouter le code à la classe partagée. En appliquant une valeur supérieure négative et en éliminant le contour, nous avons une queue d'interaction visuelle encore plus claire. 

 [Classe ^ = "Social__icon"] {
  ...
  & amp;: plancher,
  & amp;: focus,
  & amp;: actif {
  Contour: Aucun;
  TOP: -0.25EM;
  }}

17. Ajouter une ombre portée

Using transition properties we’ve animated any interaction with the buttons – moving them up, darkening the background and adding a drop shadow

[dix] [dix]
Utilisation des propriétés de transition Nous avons animé toute interaction avec les boutons - déplacez-les, assombrir le fond et ajout d'une ombre portée

Nous pouvons également utiliser la même méthode pour créer et animer une «ombre de la boîte» - en ajoutant un peu plus de profondeur à l'interaction - modifiant la hauteur verticale de l'ombre en même temps que la valeur supérieure. 

 Box-Shadow:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0,2);
& amp;: plancher,
& amp;: focus,
& amp;: actif {
  ...
  boîte ombre:
  0 0.5EM 0.25EM -0.25EM RGBA (0,0,0,0,3);
}

18. Ajouter des info-bulles

Nous pouvons facilement ajouter des info-bulles avec CSS pour ajouter une plus grande clarté pour nos utilisateurs. La première chose à faire est d'ajouter la valeur de l'info-bulle à la liste. Assurez-vous de les écrire de citations pour permettre l'utilisation des espaces si nécessaire. 

 $ Icône-liste: (
  Vimeo "Vimeo" "\ f27d" # 1Ab7ea,
  Twitter "Twitter" "\ f099" # 1Da1f2,
  ...
  github "github" "\ f113" # 333,
  RSS "RSS" "\ f09e" # F26522,
);

19. Modifier la boucle @each

En raison de l'ajout à notre liste, nous devrons modifier notre boucle '@each' pour inclure la valeur de l'info-bulle («NATE»). Nous pouvons ensuite générer ce nom comme contenu de l'élément "avant pseudo" sur nos boutons. 

 @each icône, $ nom, $ Unicode,
  $ icon-fond dans $ icon-liste {
  ...
  .Social__icon - # {$ icon} {
  ...
  & amp; :: avant {
  Contenu: '# {$ nom}';
  }
  }}

20. Style L'élément Pseudo

We've added some basic styles to the tooltips again adding transitions to animate them into position

[dix] [dix]
Nous avons ajouté des styles de base aux info-bulles ajoutant à nouveau des transitions pour les animer en position.

Nous avons maintenant le nom de chaque élément affiché à l'écran que nous devons styler l'élément, ajouter une couleur d'arrière-plan, un rembourrage et d'autres éléments de style - ainsi que le positionnement de l'élément et le préparer pour les transitions et la modification de l'opacité et des valeurs supérieures lors de l'interaction. . 

 & amp; :: avant {... ...
  TOP: -3.5EM;
  opacité: 0;
  transition:
  Top 250ms linéaires, opacité 150ms linéaires 150ms;
}
& amp;: plancher, ... {...
  & amp; :: avant {
  opacité: 1;
  TOP: -2.5EM; }
}

21. Style L'élément après pseudo

Nous utiliserons Triangles CSS Pour créer le bas de nos info-bulles - positionnez à nouveau l'élément le permettant de le préparer pour les transitions - en transigeant l'opacité et les valeurs supérieures à des horaires différents.

En ajoutant un retard, nous obtenons une animation composée de l'info-bulle et de descendre en place. 

 & amp; :: Après {...
  TOP: -1.9EM;
  opacité: 0;
  transition:
  Top 250ms linéaires, opacité 150ms linéaires 150ms;
}
& amp;: plancher, ... {...
  & amp; :: Après {
  opacité: 1;
  TOP: -0.9EM; }
}

La collection CodePen des étapes de tutoriel peut être trouvée ici .

Cet article est apparu à l'origine dans Web Designer Magazine Numéro 264. Achetez-le ici .

Lire la suite:

  • Qu'est-ce que Sass?
  • 8 Caractéristiques de CodePen Vous ne saviez pas
  • 5 conseils pour CSS Super-Fast
[dix] [dix]
[dix]

Comment - Most Popular Articles

Commencez avec la rouille

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Page 1 ..

Peindre une vie quotidienne expressive dans les acryliques

Comment Sep 14, 2025

Toujours la vie n'est pas la tasse de thé de tout le monde - il faut un certain ensemble de Techniques de peinture - Mais pour moi, c'est toujours un favori. J'aime avoir un c..

Comment réaliser un meilleur éclairage avec V-ray

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Le directeur du groupe de laboratoires de Chaos Chris Nichols fera u..

Comment prototyper une application mobile avec Adobe XD

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Ce tutoriel, vous montrant comment créer un prototype d'application..

Comment choisir le bon outil de prototypage

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Prototypage est peut-être l'une des parties les plus..

Comment rendre un ciel photoréaliste

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Pour ce tutoriel, nous utiliserons Vue Xstream ..

Comment ajouter des données à vos conceptions de croquis

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] La conception d'écran est devenue un long chemin au cours des dernières ann..

Comment capturer le mouvement dans vos rendus 3D

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Être un artiste indépendant, je travaille sur une variété de petits proje..

Catégories