À ce jour, je suis sûr que vous avez entendu parler de Sass et que "Vous devez vraiment commencer à l'utiliser!"
Apprendre un nouvel outil peut être difficile et trouver le temps de le faire est presque impossible, mais parfois, un outil qui change notre industrie est trop beau pour être ignoré.
À mesure que nos pages Web et nos applications deviennent plus complexes, nos feuilles de style deviennent plus grandes et plus difficiles à maintenir. Les préprocesseurs CSS comme Sass aident à garder nos feuilles de style concises et nous permettent de modulariser notre code tout en offrant toute une série de fonctionnalités qui ne sont pas encore disponibles en CSS standard.
Ces fonctionnalités supplémentaires les rendent également très amusantes à utiliser! Maintenant, vous avez peut-être vu quelque chose qui ressemble à ceci:
$i: 6;@while $i > 0 {.item-#{$i} {width: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
et pensé, "Whatttttttttttt? Merci mais je vais garder mon ol 'CSS habituel.
J'avoue que ça a l'air décourageant et que certaines personnes en font vraiment des fous, choses complexes avec Sass mais je suis ici pour vous dire que n'importe qui peut commencer à l'utiliser et les gains que vous en retirerez le premier jour feront de vous un croyant Sass.
La mise en place de Sass pour un projet dépasse un peu la portée de cet article, mais l’installation est relativement simple et le site Web de Sass a instructions pour Linux, Mac ou PC. Ce qui est cool, une fois installé, vous pouvez prendre n'importe quel fichier CSS que vous avez et le renommer .scss ce qui en fait un fichier Sass.
Tout CSS correctement formaté est valide Sass!
Cela signifie que vous pouvez commencer à utiliser Sass tout en continuant à écrire vos styles comme vous l’avez toujours, en incorporant lentement plus de fonctionnalités à mesure que votre niveau de confort augmente. C'est juste les gens, juste le même ol. same ol 'mais voici cinq gains incroyables dont vous disposez maintenant:
Quelle est la couleur de cet en-tête principal à nouveau? Comment écrire cette police de caractères? Combien de fois avez-vous écrit des CSS et avez-vous dû rechercher une valeur dans vos styles précédents ou devoir diviser le dropper de couleur, encore une fois, pour découvrir cette couleur hexadécimale?
Sass fournit des variables pour stocker les informations que vous souhaitez réutiliser dans votre feuille de style. Maintenant, vous pouvez stocker cette valeur de couleur ou une longue pile de polices comme quelque chose de facile à retenir. La façon dont vous déclarez une variable est avec un signe dollar $ suivi du nom. Ce nom peut être ce que vous voulez qu'il soit. Ensuite, vous tapez un deux-points : suivi de la valeur et d'un point-virgule ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Maintenant, si vous souhaitez utiliser l'une de ces valeurs, vous pouvez simplement utiliser la variable à la place.
.mySelector { font-family: $mainFont; color: $mainColor; }
Génial, non? Cette fonctionnalité unique en vaut la peine, car elle permet d'économiser beaucoup de temps lors de la création de CSS. C'est tellement génial que ça va probablement faire son chemin dans le CSS spec mais qui sait quand on pourra l'utiliser? Heureusement pour nous, avec Sass, nous n'avons pas à attendre.
Maintenant, vous vous dites peut-être "CSS a @import, ce n'est pas très cool" et vous auriez raison, mais les versions CSS et Sass diffèrent de manière significative. En CSS normal @import tire dans d'autres feuilles de style, mais il le fait en créant une autre requête HTTP, ce que nous voulons généralement éviter. Pour cette raison, vous n'avez peut-être même pas utilisé @import auparavant. Sass, d'un autre côté, est un préprocesseur (mettant l'accent sur le pré) qui va extraire ce fichier avant de compiler le CSS.
Le résultat est une page CSS gérée par une requête HTTP. Cela signifie que vous pouvez diviser votre css en morceaux plus petits et plus faciles à maintenir tout en ne servant qu'une seule page au navigateur. Besoin de corriger le texte sur le bouton? Fini les feuilles de style écrémées à la recherche des styles de boutons pertinents. Ouvrez simplement votre bouton partiel et apportez les modifications.
Qu'est-ce qu'un partiel? Juste ce qu'ils ressemblent. Ce sont des fichiers Sass partiels contenant de petits extraits de CSS que vous pouvez inclure dans d'autres fichiers Sass. Ils sont nommés en utilisant un trait de soulignement suivi d'un nom. _myFile.scss . Le trait de soulignement permet à Sass de savoir que le fichier n’est qu’un fichier partiel et qu’il ne doit pas être compilé en CSS. Pour importer ce partiel, il vous suffit d’ajouter le fichier @import à votre fichier comme suit:
@import 'partials/myPartial';
Donc, je importe _myPartial.scss qui se trouve dans un dossier nommé partials. Vous n'avez pas besoin d'inclure le trait de soulignement ou l'extension de fichier. Sass est assez intelligent pour savoir quel fichier vous voulez dire. L'utilisation des partiels nous permet de modulariser notre code, le rendant plus portable et plus facile à entretenir.
Sass apporte des fonctions à la partie CSS. Je sais que tout le monde n'est pas un programmeur et le concept d'une fonction peut être un peu sur la tête mais ne vous inquiétez pas, beaucoup ajoutent une tonne de fonctionnalités utiles sans être trop compliqué. En ce qui concerne les couleurs, il y en a plusieurs utiles pour les manipuler, mais trois sont remarquables et faciles à mettre en œuvre. Voyons comment nous les utilisons.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
La syntaxe est assez simple. Dans les trois fonctions ci-dessus, vous voyez deux arguments pour chacun. Le premier est la couleur que nous voulons manipuler. Cela peut être un format hexadécimal, RVB ou n'importe quel format de couleur approprié. Cela peut même être une variable. Le second est le montant que nous voulons modifier par cette couleur. Rendre 10% plus foncé, éclaircir de 5%, régler l'alpha à 0,6. Le résultat de cette fonction est la valeur définie dans le CSS compilé. Donc, en bas, vous voyez nos fonctions au travail
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}J'espère que vous pouvez déjà voir comment cela pourrait être utile. Il y a une douzaine de façons d'utiliser ces trois fonctions pour ajouter un contraste de couleur plutôt cool et elles peuvent être utilisées partout où une valeur de couleur est normalement utilisée. Ces trois ne sont que la pointe de l'iceberg. Il y a beaucoup plus de fonctions de couleur et de nombreuses façons créatives de les utiliser.
Certaines choses dans CSS sont un peu fastidieuses à écrire. Les mixins font des groupes de déclarations CSS que nous pouvons réutiliser sur notre site. Les styles CSS3 nécessitant des préfixes de fournisseur sont un exemple parfait de l'utilisation d'un mixin. Au lieu de taper la même propriété encore et encore, nous écrivons une fois un mixin, puis appelons ce mixin quand nous voulons l'utiliser. Pour déclarer un mixin, nous utilisons le @mixin mot-clé. Nous lui donnons alors un nom et appliquons nos styles entre accolades comme suit: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Les arguments peuvent même être transmis au mixin pour le rendre plus flexible. Pour utiliser notre mixin, nous utilisons simplement le @include mot-clé.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Comme vous le voyez dans l'exemple ci-dessus, nous appelons notre mixin avec le @include suivi du nom du mixin puis de tout argument entre parenthèses. Pensez à combien de temps cela vous sauvera. Pourquoi tout le monde ne l'utilise pas?
Ces outils ont été géniaux mais j'ai sauvé le meilleur pour la fin. @extend est l'une des fonctionnalités les plus utiles qui nous permet de partager un ensemble de propriétés CSS d'un sélecteur à un autre. Pensez à une paire de boutons, comme un bouton d'acceptation et de refus sur une fenêtre modale. Comme ce sont les deux boutons, ils partageront probablement la plupart du même style, mais le bouton de déclin aura un arrière-plan rouge pour le faire ressortir. Avec Sass, nous écrivons les styles par défaut pour tous les boutons, puis "étendons" ces styles au bouton de déclin où nous ajouterions le fond rouge.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Man, comment est-ce génial de ne pas devoir se répéter? Cela favorise non seulement la modularisation de nos styles, mais réduit également le risque que les styles ne soient pas activés. C'est un gain de temps énorme! Multipliez cela pour tous les styles du site et nous avons un délai considérablement réduit pour l'écriture de CSS.
Heck, avec tout le temps que nous sauvons peut-être nous pourrions apprendre les aspects plus complexes de Sass.
J'espère que je vous ai convaincu de donner une chance à cet outil incroyable et illustré certaines fonctionnalités susceptibles d'améliorer immédiatement votre productivité. La vérité est que je pourrais encore écrire cet article demain et avoir cinq autres fonctionnalités vraiment intéressantes à partager. C'est juste génial! Sass (et les autres préprocesseurs) sont là pour rester, alors faites-vous plaisir et commencez à l'utiliser. Pour ceux qui souhaitent en savoir plus, consultez ces ressources sur Twitter et sur le Web:
Twits:
Webs:
Et si vous êtes dans la région de Tri-County en Floride du Sud, venez nous rejoindre au South Florida Sass Meetup .