Share
"Je déteste la console, je ne fais pas Ruby et je ne me soucie pas des variables. Pourquoi devrais-je apprendre Sass dans le monde?" Arrêtez de jouer et écoutez…
Vous connaissez déjà Sass! Oui tu fais.
Sass a exactement la même syntaxe que CSS. Coïncidence? Nan. Sass a été conçu pour que les concepteurs comme vous puissent le saisir facilement et apprendre tous les avantages supplémentaires à leur rythme., si ils veulent.
Quand j'ai vu Sass pour la première fois, dès que j'ai prononcé le mot "terminal", je me suis retourné. Ce n’est pas que j’ai peur du terminal, c’est un outil très utile que je utilise (lorsque cela est absolument nécessaire) depuis des années, mais je préfère simplement une interface utilisateur. S'il n'y a pas d'interface utilisateur, je ne vais pas l'utiliser.
Devine quoi? J'ai découvert qu'il y a plusieurs options.
J'ai utilisé CodeKit depuis qu'il était en version bêta publique. Pendant tout ce temps, j'ai utilisé le terminal pour Sass environ trois fois et j'aurais pu éviter cela aussi.
Donc, vous n'aimez pas les variables. Et pourquoi, dans le monde, devriez-vous passer du temps à vous préparer à des mixins, des fonctions et tout ce jazz? Eh bien, vous ne le faites pas. Sass ne va pas te punir pour ça. Cependant, je peux vous promettre que même avec vos intentions les plus pures, vous allez vous retrouver à les utiliser tôt ou tard. Pas parce que tu devrais le faire, mais parce que tu voudras. Même chose pour les mixins.
Même si vous n'écrivez jamais, jamais une seule fonction Sass ou un mixin, vous les utiliserez quand même parce que vous trouverez de plus en plus de frameworks qui font le travail dur pour vous, vous permettant de bénéficier de ce travail en utilisant un mixin.
Imaginons donc que vous souhaitiez utiliser normalize.css pour votre prochain projet. Comment vas-tu faire ça? Ajouter une autre balise de lien à votre code HTML? Ou peut-être juste utiliser un @importation déclaration dans votre CSS? Dans les deux cas, vous ajoutez des requêtes HTTP supplémentaires; peut-être pas si grave, mais ce n'est pas optimal, et pas la meilleure pratique.
Vous pouvez simplement copier le contenu de normalize et le coller dans votre feuille de style, mais soudainement, votre fichier CSS devient un gâchis et vous n'avez même pas commencé votre projet! Alors que ferez-vous lorsque les mises à jour de normalize.css? Copier et coller à nouveau?!
Dans Sass, vous pouvez simplement utiliser le bon vieux @importationet laissez Sass extraire votre normalize.css dans votre stylesheet.css (vous devrez renommer les fichiers en .scss à la place, mais là encore - ce n’est pas grave).
Les principes DRY (Don't Repeat Yourself) sont souvent mentionnés dans les langages de programmation actuels, mais il n'y a aucune raison pour qu'ils ne soient pas appliqués dans une certaine mesure dans CSS. Après tout, n’est-ce pas la raison pour laquelle CSS a été inventé? Au lieu de spécifier encore et encore les styles dans votre code HTML, vous pouvez créer un nom de classe et y déclarer tous vos styles..
Cependant, dès que vous commencez à importer du code créé par d'autres utilisateurs (tels que des frameworks, des réinitialisations, etc.), vous risquez de répéter quelque chose..
Par exemple, normalize.css définit la police de corps par défaut sur "sans-serif". J'aime ça, c'est un bon défaut. Mais que se passe-t-il si nous voulons utiliser une police personnalisée? Faut-il éditer normalize.css? Et si normaliser est mis à jour? Nous devrons tout recommencer.
Au final, nous finissons probablement par utiliser @import en CSS.
Maintenant, nous devons simplement nous assurer que nous incluons notre normalisation en haut de notre feuille de style et nous sommes prêts à partir. Nous allons remplacer la famille de polices, alors juste pour être sûrs de gifler un !important déclaration à la fin, non? Faux!
Malheureusement, normalize.css n'est pas (encore) écrit dans Sass, mais il y a de bonnes personnes qui ont converti normized.css en Sass, que vous pouvez simplement utiliser dans votre CSS. Par exemple:
$ font-family: "Comic Sans";
Bien sûr, vous devriez déjà utiliser Normalize 2.0.1+, qui n’inclut plus une déclaration de famille de polices, mais c’était plus une illustration du problème et sa solution..
CSS est un langage en évolution. Si vous pensez toujours que les variables sont mauvaises, considérez cette spécification CSS, qui fournit l'exemple suivant:
: root var-header-color: # 06c; h1 background-color: var (en-tête-couleur);
Eh bien, si ce n'est pas une version laide d'une variable, je ne sais pas ce qui est!
Le fait est que CSS est un langage en évolution, donc même si vous ignorez les pré-processeurs aussi longtemps que vous le pouvez, il y aura un point dans le futur où vous allez être obligé d'apprendre des variables. Mon conseil est de rester en avance sur la courbe et d'adopter des choses comme des variables dès le début!
Et ce ne sont pas que les variables! Sass et d’autres préprocesseurs ont beaucoup d’influence sur les futures spécifications CSS. Voici une autre spécification en cours de développement, qui autorisera l’imbrication future du code CSS. Cela ressemblera à ceci:
/ * L'exemple suivant utilisant les hiérarchies: * / div, p & .keyword color: green; font-size: 10px; & constance couleur: rouge; &: hover: after content: "[" attr (value) "]"; background-color: green; / *… Produit les mêmes résultats que les CSS suivantes: * / div, p taille de la police: 10px; div. Mot clé, p. Mot clé couleur: vert; div .constant, p. rouge; background-color: green; div .constant: survol: après, p .constant: survol: après content: "[" attr (valeur) "]";
Dans le cas de la spécification, aucun code n'est réellement compilé, c’est tout simplement ce à quoi CSS ressemblera probablement à l’avenir!
Les spécifications CSS ne sont pas créées par un groupe d'extraterrestres particulièrement créatifs qui veulent contrôler notre vie Web depuis une galaxie lointaine. Les spécifications sont développées par personnes, ce qui signifie que d'autres personnes, en particulier les développeurs et les concepteurs (comme vous), ont une influence sur les spécifications en cours de développement. En utilisant des pré-processeurs comme Sass, vous participez à quelque chose de beaucoup plus. Vous poussez la technologie plus loin.
Si vous avez une idée ou une demande de fonctionnalité, vous pouvez la demander ou tout simplement participer à la discussion sur le comportement d'une fonctionnalité spécifique et sur son éventuelle nécessité..
Grâce à la communauté autour de Sass, il existe des outils développés par d'autres dont vous pouvez tirer parti.
ZURB, par exemple, a construit un grand framework appelé Foundation for Sass.
Si vous préférez quelque chose de plus léger, vous pouvez envisager Inuit.css.
Il y a bien sûr Compass, qui fournit un cadre avec une multitude d'options utiles…
… Comme le Bourbon plus mince.
Supposons que vous vous sentiez aventureux aujourd'hui et envisagez d'utiliser les "rem" comme unité de mesure. Comment utilisez-vous rems fournissant des solutions de remplacement pour les navigateurs obsolètes qui ne les prennent pas en charge? Heureusement, vous venez de déclarer deux fois la taille de la police; une fois en pixels, puis à nouveau pour les navigateurs qui comprendront et analyseront.
h1 taille de la police: 16px; taille de police: 1rem;
Cela serait probablement votre meilleur choix, mais cela signifie que, partout où vous voulez utiliser un rem, vous devez le taper deux fois. En outre, alors que 16px = 1rem est un calcul facile, que faire si vous avez besoin de 19px? Maintenant, fais le calcul dans ta tête. Peut tu? Oui, j'ai aussi utilisé une calculatrice (1.1875rem).
Parce que dans la communauté Sass, il y a des gars géniaux, vous pouvez rapidement rechercher Github et télécharger ce fichier _rem.scss (qui a l'air plutôt intimidant, n'est-ce pas?), Importez-le (nous parlerons d'importation dans un instant) et maintenant vous pouvez faire comme par magie:
h1 @include rem (taille de police, 2rem)
à quel moment Sass convertira automatiquement cela en
h1 taille de la police: 36px; taille de police: 2rem;
Si le jour vient où vous pouvez abandonner le support de secours, vous n’aurez pas à faire de recherche Regex et à remplacer tous vos documents. Vous pouvez simplement ajouter ceci en haut de votre feuille de style.
$ print-rem-px-fallbacks: false;
Je pense que vous pourriez deviner ce que ce paramètre "print rem px pxback" fait :)
Oui. Nous avons utilisé trois fonctionnalités Sass dans cet exemple, une variable, un mixin personnalisé et une instruction "import", mais était-ce vraiment difficile??
Voici donc quelque chose que vous allez faire pendant le reste de votre vie de développeur Web. Définir les couleurs des liens. Vous savez, ce genre de chose:
a couleur: bleu; a: hover color: yellow;
C'est une tâche qui se répète souvent, mais je ne vais pas vous suggérer de lancer votre propre Sass Mixin pour ce genre de chose. Au lieu de cela, pourquoi ne pas utiliser Compass (un framework Sass)?
un lien de couleur @include (bleu, jaune);
Cela va être compilé exactement comme ci-dessus. Et il lit aussi très bien ("inclure les couleurs des liens: bleu et jaune"), juste au cas où vous vous demanderiez comment cela fonctionne, visitez la documentation de Compass.
Si vous utilisez un éditeur qui prend en charge les extraits, vous pouvez configurer (ou télécharger) un extrait pour ajouter automatiquement @comprendre à vos déclarations (ne laissez pas cela vous effrayer).
Sass lui-même fournit une tonne de fonctionnalités très, très utiles. Bien que la documentation Sass ne soit pas la plus jolie de toutes les choses (du point de vue du concepteur), elle contient de nombreuses informations très utiles sur les fonctionnalités Sass, par exemple l'une de mes fonctions préférées dans Sass - Color Functions. Je n'ai plus besoin d'ouvrir Photoshop pour expérimenter la couleur si j'ai besoin d'une variation. Je peux simplement faire ce genre de chose:
a color: lighten (noir, 10%);
Qui est compilé dans
a color: # 1a1a1a;
Sass n'est pas ce truc de rubis que les développeurs hardcore utilisent. Il devrait vous inspirer, le concepteur, et vous aider dans votre travail quotidien. Ce n'est pas un langage de programmation, c'est une frontière Web.
Sass peut être aussi facile que vous le souhaitez. Si vous êtes curieux de savoir si vous pouvez faire quelque chose dans Sass, recherchez simplement Google, vous pourriez être surpris!
Le plus important de tous - arrêtez de parler et commencez à utiliser Sass aujourd'hui, surtout si vous voulez rester en avance sur la courbe! Et gardez l'œil ouvert pour tous les didacticiels Sass, choisissez les fonctionnalités de Sass que vous aimez et utilisez-les.!
Accentsconagua