Sass Tutorial Construire une vCard en ligne avec Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis as amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Gazouillement
 
Google+
 
Dribbble
 
 
 
 

Comme vous pouvez le voir ci-dessus, les identités sociales incluses dans le «social»La section est structurée dans des éléments de liste afin que nous puissions facilement les afficher côte à côte. Un nom de classe est attribué à chacun d'eux à la suite de cette convention. social-facebook, social-twitter, social-google etc.

Configuration du compas

Nous devons un peu configurer Compass en décommentant quelques lignes de config.rb fichier, comme suit:

 # Vous pouvez sélectionner votre style de sortie préféré ici (vous pouvez le remplacer via la ligne de commande): output_style =: expand # Pour activer les chemins relatifs vers les actifs via les fonctions d'assistance de la boussole. Uncomment: relative_assets = true # Pour désactiver les commentaires de débogage affichant l'emplacement d'origine de vos sélecteurs. Uncomment: line_comments = false 

Si vous ne trouvez pas config.rb fichier, vous n'avez probablement pas exécuté cette commande boussole init dans votre répertoire de projet.

Importer des fichiers

Comme nous allons utiliser Compass, nous devons l’importer avec;

 @import "compas"; 

De plus, ma préférence personnelle est de réinitialiser les styles par défaut des navigateurs afin que le rendu soit rendu de manière plus cohérente. Compass, dans ce cas, a un module de réinitialisation. Ce module est basé sur la réinitialisation CSS d’Eric Meyer et peut être importé à l’aide de;

 @import "compass / reset"; 

Cependant, je préfère utiliser Normaliser que heureusement vient également au format Sass / Scss. Téléchargez le fichier ici, enregistrez-le dans toupet répertoire de travail et l'importer dans notre feuille de style.

 @import "normaliser"; 

Lecture recommandée: Révision du niveau de priorité du style CSS

Variables

Nous aurons certainement quelques valeurs constantes dans la feuille de style, nous allons donc les stocker dans des variables et ces deux variables ci-dessous définiront la couleur de base de notre vCard.

 $ base: #fff; $ dark: assombrit ($ base, 10%); 

Tandis que le $ largeur variable ci-dessous sera la largeur de notre page; ce sera également la base pour définir d'autres tailles d'élément.

 $ width: 500px; $ space: $ width / 25; // = 20px 

Et le $ espace comme vous pouvez le constater, la variable sera l’espacement par défaut ou la taille de la colonne dans notre vCard qui, dans cet exemple, serait: 20px;

Compass a également des assistants pour détecter la taille de l’image et nous allons utiliser cette fonction sur notre profil d’image, comme suit;

 $ img: image-width ("me.jpg") + (($ space / 4) * 2); 

L'extra Une addition de (($ espace / 4) * 2) dans le code ci-dessus, consiste à calculer la largeur totale de l’image, y compris la bordure qui encadrera l’image. Un cadre a généralement deux côtés; haut et bas / gauche et droite, c'est pourquoi nous multiplions le résultat de la division par 2.

Sélecteur Héritage

Il y a apparemment quelques sélecteurs dans notre feuille de style qui auront les mêmes règles de style. Pour éviter les répétitions dans notre code, nous devrons d’abord spécifier ces styles et les hériter avec le @étendre directive chaque fois que nécessaire. Cette méthode, à Sass, est connue sous le nom de Sélecteur Héritage, une fonctionnalité très utile qui manque dans LESS.

 .float-left float: left;  .box-sizing @include box-sizing (border-box);  

modes

Lorsque tout ce qui est nécessaire a été configuré, il est temps de styliser notre vCard, en commençant par une couleur d’arrière-plan pour notre document HTML;

 html hauteur: 100%; couleur de fond: $ base;  

vCard

Les styles suivants définissent le wrapper vCard. Si vous avez déjà travaillé avec LESS auparavant, ce code vous sera familier et facile à digérer..

 .vcard width: $ width; marge: auto 50px; couleur de fond: assombrir ($ base, 5%); bordure: 1px solide $ sombre; @include border-radius (3px); ul remplissage: 0; marge: 0; li style de liste: aucun;  

La largeur du wrapper hérite de la valeur de $ largeur variable. La couleur de fond est plus sombre par 5% de la couleur de base, tandis que la couleur de la bordure sera plus sombre en dix%. Cette coloration est réalisée à l'aide des fonctions de couleur Sass.

La vCard aura également 3px rayon des angles arrondis obtenu avec Compass CSS3 Mixins; border-radius (3px).

Section Bio

Comme nous l'avons vu au début de ce didacticiel, la vCard peut être divisée en deux sections. Ces styles imbriqués ci-dessous définiront la première section contenant le profil d'image avec quelques détails (nom, email et téléphone)..

 .bio border-bottom: 1px solid $ dark; rembourrage: $ space; @extend .box-sizing; img @extend .float-left; bloc de visualisation; bordure: ($ espace / 4) solide #ffffff;  .detail @extend .float-left; @extend .box-sizing; couleur: assombrit ($ base, 50%); marge: gauche: $ espace; en bas: $ space / 2;  width: $ width - (($ space * 3) + $ img); li &: before width: $ space; hauteur: $ space; marge-droite: $ espace; font-family: "ModernPictogramsNormal";  & .name: before content: "f";  & .email: before content: "m";  & .phone: avant contenu: "N";  

Dans le code ci-dessus, il y a une chose sur laquelle nous pensons que vous devez prendre un avis. La largeur en .détail le sélecteur est spécifié avec cette équation $ width - (($ space * 3) + $ img);.

Cette équation est utilisée pour calculer dynamiquement les détails largeur en soustrayant la largeur du profil d'image et les espaces (remplissage et marge) de la largeur totale de la vCard.

Section sociale

Les styles ci-dessous sont pour la deuxième section de la vCard. Il n'y a en réalité aucune différence avec les CSS simples ici, seulement maintenant, ils sont imbriqués, et quelques valeurs sont définies avec des variables.

 .social background-color: $ dark; largeur: 100%; rembourrage: $ space; @extend .box-sizing; ul text-align: center; li display: inline-block; largeur: 32px; hauteur: 32px; une text-decoration: none; affichage: inline-block; largeur: 100%; hauteur: 100%; retrait du texte: 100%; espace blanc: maintenant; débordement caché;  

Dans cette section, nous allons afficher les icônes de réseaux sociaux à l'aide de la technique d'image-objet, et Compass dispose d'une fonctionnalité permettant d'accomplir ce travail plus rapidement..

Tout d’abord, nous devons placer nos icônes dans un dossier spécial - nommons le dossier. /social/, par exemple. De retour dans la feuille de style, concaténez les icônes suivantes: @importation règle.

 @import "social / *. png"; 

le social/ ci-dessus, reportez-vous au dossier dans lequel nous stockons les icônes. Ce dossier doit être imbriqué dans le dossier de l'image. Maintenant, si nous regardons dans notre dossier images, nous devrions voir une image de sprite générée avec des caractères aléatoires, comme social-sc805f18607.png. À ce stade, rien ne se passe toujours pas au début, jusqu'à ce que nous appliquions les styles avec la ligne suivante.

 @include all-social-sprites; 

Résultat final

Enfin, après tout le travail acharné, nous pouvons maintenant voir le résultat comme ceci:

Au cas où nous pensons que 500px est trop large plus tard, il suffit de changer la valeur dans $ largeur variable - par exemple, 350px - le reste sera “magiquement” être ajusté. Vous pouvez également expérimenter avec la variable de couleur.

• Voir la démo
• Source de téléchargement

Conclusion

Dans ce tutoriel, nous vous avons montré comment créer une vCard en ligne simple avec Sass et Compass. ce n'est cependant qu'un exemple. Sass et Compass sont en effet puissants, mais parfois ce n'est pas nécessaire. Par exemple, lorsque nous travaillons sur un site Web avec quelques pages et n’aurons probablement besoin que de moins de lignes de styles, utiliser Sass et Compass est considéré comme excessif..

Cet article ferme notre série Sass et nous espérons que vous l'avez apprécié. Si vous avez des questions concernant ce sujet, n'hésitez pas à les ajouter dans la zone de commentaire ci-dessous..