Share
Sass est conçu pour aider à écrire CSS plus rapidement. Les mixins sont des fonctionnalités qui le rendent possible. Il existe plusieurs bibliothèques lourdes avec des formules complexes pour chaque situation, mais je vais maintenant montrer comment créer vos propres mixins qui complètent les flux de travail existants..
La vignette: main mélange oeuf sur PhotoDune.
Remarque: Les fichiers de document terminés peuvent être téléchargés à l'avance pour voir ce que nous allons créer et avoir une idée de l'apparence des fichiers Sass bruts..
J'utilise Sass dans mon développement front-end depuis plus d'un an, et les mixins ont été la fonctionnalité sur laquelle je me suis attachée tout de suite. J'ai constaté une réduction instantanée du temps passé à rédiger des feuilles de style, que le projet soit grand ou petit. Mais que sont les mixins? Sur le site Web de Sass Language:
Les mixins sont l’une des fonctionnalités les plus puissantes de Sass. Ils permettent la réutilisation de propriétés de styles ou même de sélecteurs, sans avoir à les copier et les coller ou à les déplacer dans une classe non sémantique..
En d'autres termes, les mixins sont des générateurs de code. Vous créez un mixin dans votre feuille de style Sass avec le @mixin directive, définissez les règles CSS à générer et appelez-les à tout moment si vous avez besoin que ces règles soient incluses dans une déclaration de style. J'utilise mixins exclusivement pour les fonctionnalités CSS3 telles que les ombres de boîte, les ombres de texte et les rayons de bord. Nombre de ces fonctionnalités ne sont pas entièrement prises en charge et nécessitent un préfixe de fournisseur tel que -webkit-, -moz-, -ms-, -o- travailler comme prévu. Au lieu d'écrire cinq règles chaque fois que je souhaite utiliser une fonctionnalité CSS3, je peux appeler un mixin d'une ligne et le faire générer le code CSS approprié pour moi..
Ces deux premières étapes nous obligent à ouvrir l’application Terminal (Invite de commandes sous Windows) pour vérifier le langage Ruby et installer la gem Sass. Recherchez le terminal dans les endroits suivants:
Une fois le terminal ouvert, tapez la commande suivante pour rechercher une installation de Ruby. Ne tapez pas le signe dollar, c'est votre espace réservé.
$ quel rubis
Vous devriez voir des informations de chemin comme / usr / local / bin ou un message d'erreur si Ruby n'est pas installé. Voici la sortie de mon terminal OS X:
Si vous recevez une erreur ou si vous savez que Ruby n’est pas installé sur votre ordinateur, voici quelques ressources pour le rendre opérationnel avec un minimum d’effort. Le processus d'installation de Ruby n'entre pas dans le cadre de cet article et est bien documenté sur les sites ci-dessous..
Une fois que vous avez vérifié ou installé le langage Ruby, Sass est un jeu d'enfant. Depuis le terminal, entrez cette commande: $ gem installe sass. Si votre utilisateur ne dispose pas des autorisations appropriées, vous devrez peut-être exécuter la commande avec sudo (Super utilisateur faire) comme ça: $ sudo gem installer sass. Dans quelques secondes, vous devriez voir une sortie similaire à celle présentée ci-dessous..
Tant que vous ne le faites pas avoir besoin une application de compilateur telle que LiveReload, Compass ou CodeKit pour compiler Sass en CSS vanille, elle simplifie grandement le premier voyage dans le bloc. CodeKit concerne uniquement OS X, LiveReload est principalement destiné à OS X, avec une version bêta de Windows. Compass App fonctionne sur OS X, Windows et Linux. Les licences varient entre 10 USD et 25 USD au moment de la rédaction de cet article, mais en valent la peine pour le temps gagné alors que vous approfondissez le développement de Sass..
C’est le bon moment de mentionner que Sass se décline en deux saveurs., .toupet et .scss. Sans entrer dans les détails, je m'en tiens à la syntaxe .scss car elle ressemble beaucoup au CSS vanille et se compile sans problème..
Après avoir configuré votre compilateur, vous souhaiterez configurer un répertoire de travail avec vos fichiers HTML et CSS. Pour ce tutoriel, j’ai créé un exemple appelé Write Your Own Sass Mixins. Vous trouverez ci-dessous la structure à laquelle je me référerai tout au long du tutoriel. Si vous n'avez pas encore téléchargé les fichiers de document, veuillez le faire et ajoutez les fichiers Museo Sans et Droid Serif à votre répertoire / fonts. Ces polices sont nécessaires pour certains mixins que nous créerons plus tard dans le tutoriel..
Écrivez votre propre Sass Mixins index.html / css (répertoire) / fonts (répertoire) / scss (répertoire) | - main.scss
Depuis que j'ai opté pour LiveReload, nous lui dirons de surveiller les modifications devant être compilées dans CSS. Lorsque vous lancez LiveReload, vous devriez être accueilli par l'écran ci-dessous. Faites glisser votre répertoire de travail dans la barre latérale des dossiers surveillés de la fenêtre LiveReload..
Ensuite, vous aurez envie de vérifier la Compiler SASS, LESS, Stylus, CoffeeScript et autres boîte. Cliquez sur Les options pour sélectionner votre chemin de sortie suivant.
Vous devriez voir un tableau vide avec les chemins de sortie mis en surbrillance et coché sur scss / main.scss sur la première ligne. Clique le Définir le dossier de sortie… bouton ici. Le dossier CSS doit être sélectionné par défaut. Cliquez sur Définir le dossier de sortie et sur Appliquer.
Mettez à jour votre fichier index.html avec ce code et actualisez votre navigateur. Votre index devrait ressembler à l'écran ci-dessous.
Écrivez votre propre mix Sass Un texte va ici.
LiveReload propose des extensions de navigateur pour Firefox et Chrome, mais le moyen le plus rapide de fonctionner consiste à copier le fragment de code Javascript suivant (à partir de la fenêtre LiveReload) dans votre fichier index.html, juste au-dessus du fichier de fermeture. corps étiquette. Une fois que cet extrait est en place, LiveReload écoutera les modifications apportées à vos fichiers HTML et Sass, et mettra automatiquement à jour le navigateur - plus de commande + R toutes les quelques minutes..
Maintenant que l’entretien est terminé, nous pouvons commencer à créer des mixins et laisser notre compilateur faire le travail difficile..
Comme indiqué précédemment, j'utilise beaucoup de fonctionnalités CSS3 dans mes mises en page. Le problème avec ces fonctionnalités de pointe, c'est qu'elles nécessitent beaucoup de préfixes de fournisseur et je n'ai pas beaucoup de patience. Si je peux écrire un mixin une fois, au lieu de cinq lignes de CSS fortement dupliquées à chaque fois que je veux des angles arrondis, je vais le faire..
Les mixins sont identifiés dans les fichiers Sass par le @mixin () déclaration. Chaque fois qu'un processeur tel que LiveReload utilise cette syntaxe, il recherche des arguments dans les parenthèses et des instructions de type CSS dans les accolades. Le compilateur interprétera ensuite ces instructions et générera du CSS pur sur votre feuille de style, main.css dans ce cas..
Ouvrez votre fichier main.scss et copiez le code de mixin suivant. Lorsque vous cliquez sur Enregistrer, la fenêtre de votre navigateur avec index.html devrait se recharger automatiquement et comporter un div gris centré aux angles arrondis 6px..
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; #wrapper @include border-radius (6px, 6px, 6px, 6px); largeur: 750px; hauteur: 250px; fond: #eee; marge: 0 auto;
Nous sommes donc bien partis avec notre premier mixin. Mais le mix border-radius présente un point faible: si nous appliquons une bordure d'opacité inférieure à 100%, l'arrière-plan sera visible. Pas vraiment un bon choix de design dans de nombreux cas.
Heureusement, nous avons une solution simple dans la propriété background-clip. Si vous ne le connaissez pas, Chris Coyier de CSS-Tricks a un excellent article sur la propriété..
Les mixins Sass peuvent également être étendus avec d'autres mixins. Cela nous permet d’écrire séparément le clip d’arrière-plan et de créer un troisième mix qui l’appelle ainsi que nos règles de rayon-bordure de l’étape précédente. Ajoutez le code suivant à votre fichier main.scss et enregistrez-le. Après avoir actualisé votre navigateur, vous devriez voir un fond bleu et une bordure semi-transparente de rayon bleu.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin combine-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); body background: lightblue; #wrapper width: 750px; hauteur: 250px; fond: #eee; marge: 0 auto; bordure: 15px solid rgba (255, 255, 255, 0,3); @include rayon combiné (6px, 6px, 6px, 6px);
Bien que nous ayons initialement dupliqué un certain nombre de lignes, nous disposons maintenant d’un mixin réutilisable qui peut être appelé à tout moment en fournissant les valeurs de rayon-rayon. Et cela rendra correctement.
Les ombres de texte sont un excellent moyen de créer des traitements typographiques et des boutons. Je les utilise souvent pour certains états, onglets ou étiquettes de navigation. Ils constituent également l’un des éléments les plus exaspérants, car IE9 ne les prend pas en charge et qu’il n’existe pas de solution de contournement CSS pure..
Malgré ce fait regrettable, j'inclus le code de mixin pour les autres navigateurs modernes et IE 10 bêta. Je suis également tombé sur un script jQuery pour le rendu d'ombre de texte dans IE9 ou une version inférieure.
Pour les navigateurs modernes, la propriété text-shadow est structurée de la même manière que la boîte-shadow, avec des paramètres de décalage horizontal et vertical, de flou et de couleur. Ajoutez le code suivant à vos fichiers main.scss et index.html et vous devriez voir une ombre floue de 3 pixels derrière du texte bleu..
/ * Main.scss * / @mixin text-shadow ($ horizOffset, $ vertOffset, $ flou, $ couleur) -webkit-text-shadow: $ horizOffset $ vertOffset $ blur $ couleur; -moz-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-text-shadow: $ horizOffset $ vertOffset $ blur $ color; / * IE 10+ * / -o-text-shadow: $ horizOffset $ vertOffset $ blur $ color; text-shadow: $ horizOffset $ vertOffset $ blur $ color; #wrapper, # wrapper-text-shadow width: 750px; hauteur: 250px; fond: #eee; marge: 0 auto 20px; remplissage: 15px 0 0 15px; bordure: 15px solid rgba (255, 255, 255, 0,3); @include rayon combiné (6px, 6px, 6px, 6px); # wrapper-text-shadow> p taille de la police: 36px; Couleur bleue; @include text-shadow (0, 3px, 3px, # 333);
Index.html, ajoute juste après la balise fermante de div # wrapper
Test d'ombre de texte.
Pour la dernière étape, j'ai créé des mixins pour les ombres de la boîte, les dégradés d'arrière-plan, les déclarations @ font-face et l'amélioration du rendu des types. Ces mixins ont été testés dans les navigateurs modernes (Firefox, Chrome, Safari, Opera, IE9) et incluent tous les préfixes spécifiques au fournisseur..
Je n'entrerai pas dans les détails sur chacun d'eux; les commentaires détaillés sont inclus dans le fichier main.scss. Les mixins suivent un format de base et peuvent être développés en fonction de vos besoins Si vous avez un besoin en CSS, un mixin peut être écrit pour le servir.
Mettez à jour vos fichiers index.html et main.scss avec le code suivant. Après rafraîchissement, vous devriez voir une fenêtre du navigateur contenant un certain nombre de cases, chacune montrant un test de mixin différent..
Juste un autre extrait de Textmate Test de l'ombre de la boîte.Test d'ombre de boîte d'encart.Test d'ombre de texte.Test de dégradé de fond.Test @ font-face dans Museo 700 sans.Améliorer la lisibilité du texte et le test de crénage.
Accentsconagua
@mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin combine-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); @mixin box-shadow ($ horizOffset, $ vertOffset, $ flou, $ couleur) / * Le flou est un paramètre facultatif, mais permet d'adoucir l'ombre. Appelez le mixin en appliquant les valeurs de pixel pour $ horizOffset, $ vertOffset et $ blur, ainsi qu'une valeur hexadécimale pour $ color. La règle de réduction de la bordure est incluse pour rendre correctement les ombres dans IE9. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color; box-shadow: $ horizOffset $ vertOffset $ blur $ color; effondrement de la frontière: séparé; @mixin box-shadow-inset ($ horizOffset, $ vertOffset, $ flou, $ color) / * Mêmes paramètres que @mixin box-shadow, mais crée une ombre interne pour les effets enfoncés ou en retrait. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; @mixin background-gradient ($ direction, $ première couleur, $ deuxième couleur) background: $ first-color; background-image: -webkit-linear-gradient ($ direction, $ première couleur, $ deuxième couleur); image d'arrière-plan: -moz-linear-gradient ($ direction, $ première couleur, $ deuxième couleur); image d'arrière-plan: -ms-linear-gradient ($ direction, $ première couleur, $ deuxième couleur); background-image: -o-linear-gradient ($ direction, $ première couleur, $ deuxième couleur); background-image: linear-gradient ($ direction, $ première couleur, $ deuxième couleur); @include background-clip; @mixin typography ($ font-name, $ font-longname) / * Assurez-vous de créer un répertoire / fonts au même niveau que votre répertoire / css afin de vous assurer que les chaînes d'URL ci-dessous fonctionnent correctement. Les webfonts incluront le nom abrégé à référencer dans les déclarations de famille de polices et le nom long requis pour les références url. Le mixin devra être appelé avec la déclaration @include immédiatement ci-dessous pour charger correctement les polices. * / @ font-face font-family: $ nom-police; src: url ("… / fonts /" + $ font-longname + ".eot"); src: local ('☺'), url ("ww"), format ('… / fonts / "+ $ font-longname"), url ("… / fonts /" $ font-longname + " .ttf ") format ('TrueType'), url ("… / fonts / "+ $ font-longname +" .svg # webfontjVVPrHqE ") format ('svg'); poids de police: normal; style de police: normal; @include typography ("Museo700", "Museo700-Regular-webfont"); @include typographie ("DroidSerifRegular", "DroidSerif-Regular-webfont"); @mixin améliorent la lisibilité / * Le mélange améliorant la lisibilité est recommandé pour les en-têtes et les petites quantités de texte en raison du rendu des polices gourmand en ressources. Il n'est pas recommandé pour les appareils mobiles. Pour plus d'informations, reportez-vous à l'article MDN (https://developer.mozilla.org/en-US/docs/CSS/text-rendering) ou à Gigaom (http://gigaom.com/2010/08/12/ optimizelegibility-for-clearer-text-in-your-browser /). Inspectez dans Chrome ou Safari et activez / désactivez la règle de rendu du texte: optimisationLégibilité pour voir son effet sur le crénage. Il activera également les ligatures sur les polices prenant en charge les ensembles étendus. * / rendu du texte: optimise la légitimité; @include text-shadow (0, 0, 1px, transparent); body background: lightblue; famille de fontes: Helvetica, Arial, sans serif; poids de police: normal; #wrapper, # wrapper-inset-shadow, # wrapper-text-shadow, # wrapper-background-gradient, # wrapper-font-family, # wrapper-améliorer-lisibilité width: 750px; hauteur: 250px; fond: #eee; marge: 0 auto 20px; remplissage: 15px 0 0 15px; bordure: 15px solid rgba (255, 255, 255, 0,3); @include rayon combiné (6px, 6px, 6px, 6px); #wrapper @include box-shadow (0, 3px, 3px, # 333); # wrapper-inset-shadow @include box-shadow-inset (0, 3 pixels, 3 pixels, # 333); # wrapper-text-shadow @include text-shadow (0, 3px, 3px, # 333); taille de police: 36px; Couleur bleue; # wrapper-background-gradient @include background-gradient (haut, # 999, #fff); # wrapper-font-family font-family: "Museo700", Helvetica, Arial; # wrapper-améliorer-lisibility> h1 font-family: "DroidSerifRegular", Géorgie, "Times New Roman", empattement; poids de police: normal; taille de police: 48px; @include améliorer la lisibilité; 
Les mixins Sass sont un excellent moyen de se familiariser rapidement avec CSS3. Que vous utilisiez du code, ou que vous construisiez un site entier à partir de zéro, mixins améliorera votre flux de travail en réduisant les lignes tapées et le temps passé à réviser la syntaxe..
Étant donné que ces fonctionnalités sont centrées sur CSS3, vous devez avoir un plan de sauvegarde pour les serveurs les plus anciens. Pour certains sites, les coins arrondis et les ombres ne sont pas critiques, et il est parfaitement acceptable de montrer une présentation visuelle dégradée. Pour d'autres, un polyfill comme Modernizr peut fournir des classes spécifiques à des fonctionnalités pour écrire des règles CSS de secours..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
