Share
Cet article est la deuxième partie de mon exploration des mixins de la bibliothèque Bourbon Sass. Parmi eux, vous trouverez des exemples utiles qui accéléreront votre flux de travail et réduiront votre code Sass.
Nous allons avoir un aperçu des huit mixins suivants:
Accentsconagua
Inline Block mixinPosition mixinMélange triangleClearfix mixinMélange de boutonsTaille mixinMixage de requêtes multimédia HiDPIRetin Image mixinComme dans le didacticiel précédent, les exemples ci-dessous ne représentent pas nécessairement les meilleures pratiques de conception, mais sont choisis pour explorer les fonctionnalités de base de ces mixins..
Les paragraphes, par défaut, s'affichent comme bloc éléments.
HTML:
"html
Yada yada yada
Yada yada yada
"
Les éléments de niveau bloc, tels que les paragraphes, créent automatiquement une nouvelle ligne dans la présentation..
Ce mixin est pratique si vous voulez changer le comportement d'affichage par défaut d'éléments à bloc en ligne. Il ne se limite pas affichage: bloc en ligne mais prend également en charge les bizarreries et le support hérité pour IE7.
En savoir plus sur l'affichage sur designshack.net.
Sass: Ces blocs ont un comportement de type flottant, via inline-block.
"css. paragraphes-se comporter-comme-blocs + inline-block-background-color: tomate
// Syntaxe SCSS //. .Seconds-be-be-like-blocks @include inline-block; // "
Regardez la sortie CSS générée. Qui veut gérer des trucs méchants comme ça quand même?
Sortie CSS:
css. paragraphess-be-be-like-blocks display: inline-block; alignement vertical: ligne de base; zoom: 1; * display: inline; * vertical-align: auto; couleur de fond: tomate;
Mis à affichage: bloc en ligne, les paragraphes sont affichés en ligne, mais conservent leurs caractéristiques au niveau des blocs.
Attention! Notez les espaces entre les éléments du bloc. Si vous utilisiez flotte pour obtenir la même disposition, vous ne verrez aucun espace. C'est une sorte d'espace blanc par défaut, présent dans le HTML, qui ne disparaît pas en fixant les marges à 0px. Au lieu de cela, vous devez supprimer les espaces de caractère dans le balisage lui-même, comme illustré dans ce stylo:
Ce mixin est un raccourci pour écrire quelque chose comme ce qui suit:
Toupet:
css .some-element position: relative top: 0px left: 100px
Toupet:
"css .some-element + position (relative, 0px 0 0 100px) // en haut à droite en bas à gauche
// syntaxe SCSS .some-element // @include position (relative, 0px 0 0 100px); "
C'est tout. Pas de magie, mais toujours super utile. Garder les feuilles de style simples et lisibles est rentable avec le temps.
Voulez-vous utiliser les triangles CSS sans vous amuser? Il n'y a certainement pas besoin d'utiliser des images pour le travail. C'est simple comme bonjour avec ce mixin.
Toupet:
"css .triangle + triangle (25px, tomato, down) // taille, couleur, direction
// syntaxe SCSS .triangle @include triangle (25px, tomato, down); // "
Le troisième paramètre définit la direction. Les options pour ce mixin incluent:
vers le basen hautla gauchedroite
droiten haut à gauchecarrémenten bas à gaucheVous pouvez même définir une deuxième couleur si vous avez besoin d’une couleur d’arrière-plan pour votre triangle..
Les conteneurs contenant des éléments flottants se heurtent à un problème de conteneur de hauteur nulle. En principe, l'élément de conteneur se dégonfle à zéro pixel si tous ses éléments internes sont flottés et sortis du conteneur. couler. Essentiellement, il n'y a plus rien pour remplir le récipient.
le clearfix mixin s'en occupe lorsqu'il est appliqué à l'élément conteneur / wrapper. La meilleure chose à propos de cela est qu'il ne nécessite pas de balisage «vide» supplémentaire pour accueillir le clearfix. Il garde les choses sémantiques, séparant les préoccupations, en ajoutant simplement le correctif dans vos feuilles de style. Jetez un oeil à cet exemple très simple:
HTML:
"html
"Sass:" css $ gris clair: # D4D4D4. Couleur de fond gris-wrapper: $ gris clair + clearfix .logos float: droite + image de fond (url ("[email protected]"), url ("thinkbot.png")) background-position: centre en haut, en haut à gauche background-repeat: répète-y, répète-x hauteur: 220px largeur: 50% // syntaxe SCSS // .grey-wrapper @include clearfix; couleur de fond: $ gris clair; .logos float: right; @include background-image (url ("[email protected]"), url ("thinkbot.png")); position de fond: centre en haut, en haut à gauche; répéter en arrière-plan: répéter-y, répéter-x; hauteur: 220px; largeur: 50%; // "! [fichier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633234957.jpg) Dans l'exemple ci-dessus, le conteneur gris se développe pour contenir Toutefois, lorsque clearfix n’est pas utilisé:! [fichier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633341703.jpg) Si vous prenez en regardant le code source, on voit clairement comment fonctionne ce * micro clearfix *: Sass: [code source Bourbon] (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix .scss) "css @mixin clearfix &: after content:" "; affichage: table; clarifier les deux; "Ce mixin utilise le:après pseudo-élément pour placer une chaîne vide à la toute fin du conteneur. Ce faisant, il imite le contenu après le logo et incite le navigateur à développer le conteneur gris pour entourer d'autres éléments à l'intérieur. ## Button Mixin Besoin de boutons de haute qualité prêts à l'emploi? ### Standard Button! [Fichier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633769651.png) HTML: "html Super bouton duper" Sass: "css $ light-blue: # 2485F1 .super-duper-button + button ($ light-blue) // syntaxe SCSS // .super-duper-button @include button ($ light-blue); // "c'est tout ! Boutons simples et sémantiquement propres. Ils viennent même avec de superbes effets de survol subtils. Et il existe encore deux options: ### Pill Button! [Fichier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633844440.png) HTML: "html Super bouton de pilule duper "css $ rose foncé: # 6B32D1. bouton + duper-duper + (pilule, $ rose-foncé) // syntaxe SCSS //. bouton-de-duper-duper @include (pilule, $ dark- rose); // "### Shiny Button! [Fichier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633895872.png) HTML:" html Super duper shiny button "Sass:" css $ accept-vert: # 43C914. Bouton + bouton-duper (brillant, $ accept--vert) // Syntaxe SCSS //. Bouton -super-duper @include (brillant, $ acceptation- vert); // "** Attention! ** Veuillez noter que le texte sur les boutons change automatiquement de couleur en fonction de la * luminosité * de la couleur de base du bouton. Ainsi, le mixin offre un meilleur contraste et une meilleure lisibilité. Génial!! [fichier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441634000114.png) Sass: "css $ gris-clair: #DEDEDE. bouton # + DEDEDE .super-duper-button + button (brillant, $ gris clair) // syntaxe SCSS // .super-duper-button bouton @include (brillant, $ gris clair); // "## Size Mixin Avez-vous déjà besoin de définir largeur et la taille dans une déclaration? Avec Bourbon, voici tout ce que vous devez faire: Sass: "css .small-article + size (300, 400) // syntaxe SCSS // .small-article @include size (300, 400); //" CSS output: "css .small-article width: 300px; height: 400px;" Vous pouvez fournir des valeurs en pixels ou uniquement des valeurs numériques. Vous pouvez utiliser auto pour ces valeurs aussi. Si vous fournissez une seule taille, Bourbon suppose que vous voulez un carré. Sass: "css .square + size (25px) // syntaxe SCSS // .square @include size (25px); //" ## HiDPI Mixin Si vous souhaitez générer rapidement des requêtes multimédias entièrement préfixées par le vendeur pour la détection * HiDPI * («Retina»), ce mix est très pratique. Commencez par fournir un * rapport de pixels de périphérique * et des déclarations qui changent si la requête de média est déclenchée. Le rapport par défaut est de 1,3. Sass HiDPI-media-query: "css .image largeur: 150px + hidpi (1.5) largeur: 200px // syntaxe SCSS // .image largeur: 150px; + hidpi (1.5) largeur: 200px; //" Sortie CSS: "css .image width: 150px; @media uniquement l’écran et (-webkit-min-device-pixel-ratio: 1.5), uniquement l’écran et (min - moz-device-pixel-ratio: 1.5), uniquement écran et (ratio de -o-périphérique-pixel: 1,5 / 1), uniquement écran et (résolution minimale: 144 dpi), uniquement écran et (résolution minimale: 1.5dppx) width: 200px; " Plutôt cool! Cela affine un peu le code répétitif. ## Retina Image Mixin En fonction de la * densité de pixels * du périphérique affichant vos dessins, vous pouvez fournir des images avec la résolution bitmap appropriée. Ce mélange délicat fournit une * image d'arrière-plan rétine * ou une * image d'arrière-plan non rétinienne *, en fonction du résultat de la requête HiDPI-media interne du mélange vérifiant l'appareil pour sa densité de pixels. Si je ne me trompe pas, en bonus, il ne servira qu'une seule des images pour éviter de télécharger les deux, ce qui est particulièrement avantageux pour les réseaux cellulaires. Si tout ce qui précède vous préoccupe, je vous recommande de commencer par ce fantastique [article] (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) dans Smashing Magazine. Sass: "css .logo + retina-image (logo-icon, 50px, 30px) // syntaxe SCSS // .logo @include retina-image (logo-icon, 50px, 30px); //" La sortie CSS aide à expliquer sa fonctionnalité: "css .logo image de fond: url (logo-icon.png); @média uniquement écran et (-webkit-min-device-pixel-ratio: 1.3), uniquement écran et (min- -moz-device-pixel-ratio: 1.3), uniquement l’écran et (-o-min-device-pixel-ratio: 1.3 / 1), uniquement l’écran et (résolution minimale: 125 ppp), uniquement l’écran et (résolution minimale : 1.3dppx) .logo background-image: url (logo-icon_2x.png); background-size: 50px 30px; "Le paramètre par défaut d'un ratio de pixels de 1,3 pour les cibles de périphériques Apple" Retina "(qui ont un 2) ainsi que des appareils avec un taux de pixels aussi bas que 1,3. Ce mixin attend un **. Png ** comme extension standard pour toutes les images. Par défaut, il s'attend également à une extension ** _ 2x.png ** au nom de fichier de votre image rétine. Vous pouvez écraser les deux valeurs par défaut en fournissant un autre nom de fichier retina et une extension standard, comme suit: Sass: "css .logo + retina-image (icône du logo, 50px, 30px, extension: jpg, $ retina-filename: HiDPI- logo-icon, suffixe-retina: _retina) // syntaxe SCSS // .logo @include retina-image (icône-logo, 50px, 30px, extension $: jpg, $ retina-nom_fichier: HiDPI-logo-icon, $ retina-suffix: _retina); // "Sortie CSS:" css .logo image de fond: url (logo-icon.jpg); @ Écran uniquement multimédia et (-webkit-min-device-pixel-ratio : 1.3), uniquement l’écran et (min - moz-device-ratio-pixel: 1.3), uniquement l’écran et (-o-min-device-pixel-ratio: 1,3 / 1), uniquement l’écran et (min-résolution: 125dpi), uniquement l’écran et (résolution minimale: 1,3dppx) .logo image de fond: url (HiDPI-logo-icon_retina.jpg); taille d’arrière-plan: 50px 30px; "## Salut! C'est tout ce que nous allons couvrir en termes de mixins Bourbon. Dans le prochain tutoriel, nous examinerons les fonctions de Bourbon.
