Share
L'utilisation de préprocesseurs tels que Sass, LESS et Stylus a toujours permis aux développeurs de mieux contrôler leurs feuilles de style, mais le CSS natif réduit progressivement l'écart. Les fonctionnalités CSS telles que les variables, calc et mixins ne sont que la partie visible de l'iceberg. Voyons ce que les préprocesseurs nous aident actuellement et comment la logique CSS native va changer notre façon de faire les choses..
Graphique de la police de caractères Brother sur Envato ElementsDes abstractions de langage telles que Sass, LESS et Stylus ont bouleversé le monde des développeurs en leur fournissant des variables, des mixins, des fonctions, des extensions et bien plus encore. Ces préprocesseurs ont rempli les fonctions manquantes que CSS n’était pas en mesure de fournir..
Cependant, CSS ne devrait plus être considéré comme «moins logique» sans la présence de l'intellect. Alors que CSS est sur le point de s'affiner, nous entrevoyons déjà l'avenir - un avenir qui rivalisera avec les pré-processeurs..
En règle générale, nous associons des «mixins» à des pré-processeurs, groupes de déclarations CSS que vous pouvez réutiliser dans un projet. Un mixin peut être utilisé comme aide autonome ou vous pouvez passer des valeurs en tant qu'arguments pour le rendre plus flexible..
Voici un sass @mixin exemple appelé taille de police.
@mixin font-size ($ size, $ base) font-size: $ size; // repli pour les anciens navigateurs font-size: ($ size / $ base) * 1rem;
Le mixin ci-dessus acceptera les arguments pour taille de $ et $ base, et il est utilisé dans un @comprendre déclaration avec la possibilité d'ajuster les arguments en fonction du contexte.
/ * Sass Call * / body @include font-size (14, 16); / * Sortie CSS * / body taille de la police: 14px; taille de la police: 0.875rem;
Le résultat est un rem valeur basée pour taille de police avec un px repli pour les navigateurs qui ne supportent pas rem. Les mixins de préprocesseur comme celui-ci ont permis aux développeurs de gagner d'innombrables heures.
Les mixins CSS natifs sont actuellement un brouillon pour les éditeurs, mais ont également une implémentation fonctionnelle dans Chrome. Si vous avez déjà joué avec des variables CSS, l'extrait suivant vous semblera assez familier.
: root --pink-theme: background: # F64778;
Attention, le code ci-dessus rendra votre surligneur de syntaxe dingue. Cette façon d’écrire un mixin CSS utilise un nouvel at-rule appelé @appliquer, semblable à ce que nous savons à Sass @comprendre.
body @apply --pink-theme;
Tout comme nous connaissons l'utilisation de Sass @comprendre, nous pourrions éventuellement avoir @appliquer pour CSS!
Vous pouvez essayer cette expérience par vous-même dans Chrome en activant un indicateur sous chrome: // flags / # enable-expérimental-web-platform-features.
Rappelez-vous quand les pré-processeurs étaient les seuls outils de style capables de la gymnastique mathématique? Eh bien, ce n'est plus le cas. Avec calc (), nous pouvons prendre ces nombres embêtants et les transformer en nouvelles valeurs en fonction de l'arithmétique souhaitée.
nav marge: calc (1rem - 2px) calc (1rem - 1px);
C'est la beauté de calc (); il étend enfin les pouvoirs de la CSS dans la stratosphère. Préférer l'addition? Soustraction? Division? Multiplication? Calc peut gérer tout cela et plus.
Si vous souhaitez en savoir plus sur calc (), La spécification W3C a tout ce dont vous aurez besoin pour vous rendre somnolent et heureux en même temps. La prise en charge du navigateur est également solide, selon Can I Use.
Les variables natives pour CSS sont enfin là. C’est une option réelle et tangible pour les développeurs, même s’il a fallu un certain temps pour apprendre des pré-processeurs.
Voici à quoi ressemble la syntaxe de la variable Sass:
unité d'espacement $: 20px; main margin: $ spacing-unit; rembourrage: $ unité d'espacement;
Les variables Sass sont indiquées par un dollar $ signe, mais en CSS, ils sont un peu différents:
: root --primary-color: skyblue; nav.primary background: var (- couleur primaire);
Les variables CSS sont désignées par un double trait d'union -- et sont généralement placés à l'intérieur :racine pour un accès global, bien que leur portée puisse être réduite en les plaçant dans des déclarations de sélecteur spécifiques.
div color: var (- my-var, rouge);
Les variables peuvent même accepter une valeur de repli si elles ne sont pas encore définies, comme dans l'exemple ci-dessus. La prise en charge du navigateur n’est pas mauvaise non plus, Edge affichant une prise en charge partielle. La spécification est également en cours de recommandation par les candidats pour votre plus grand plaisir de lire..
L'imbrication est une fonctionnalité de nombreux préprocesseurs qui vous permet de placer des sélecteurs à l'intérieur une déclaration existante. Typiquement, imbriquer dans Sass ressemble à ceci:
ul margin: 20px auto; li taille de la police: 12px; une text-decoration: none;
L'imbrication peut devenir difficile à manier et vous mettre dans une tonne d'ennuis, ce qui entraîne des chaînes de sélecteur incroyablement longues. Pour cette raison, il est conseillé de s'en tenir à la règle de création et de continuer à imbriquer jusqu'à trois ou quatre niveaux de profondeur..
Bien que la nidification puisse être dangereuse, elle peut également être utile si vous prenez le temps de faire attention. Voici un aperçu de la manière dont il pourrait éventuellement rechercher du CSS natif:
/ * Imbrication CSS * / nav color: # 222; & .primary background: maroon; / * Résultat * / nav color: # 222; nav.primary background: maroon;
Tout comme nous sommes habitués avec nos alliés de préprocesseurs, l'imbrication CSS native nous prête les mêmes principes, mais sans qu'il soit nécessaire de compiler le langage. Il y a un brouillon de spécification par Tab Atkins sur cette fonctionnalité même pour l'imbrication de CSS natif.
Les «extensions» constituent un autre moyen de transmettre des propriétés et des valeurs, en les partageant entre des déclarations. Dans Sass, nous nous sommes habitués à appliquer la syntaxe suivante:
.message border: 1px solid #ccc; rembourrage: 10px; couleur: # 333; .success @extend .message; couleur de bordure: vert; .error @extend .message; couleur de bordure: rouge; .warning @extend .message; couleur de bordure: jaune;
Vous pouvez voir que nous commençons par définir des styles pour .message, puis offrir trois variantes avec différents couleur de bordure. Chaque variante en premier s'étend .message, héritant ainsi de toutes ses règles de style, avant de changer la couleur de la bordure.
La syntaxe identique à l'exemple ci-dessus correspond à ce que Tab Atkins a rédigé comme autre spécification potentielle pour le CSS natif. Que vous acceptiez ou non les extensions (une fonctionnalité dont les avantages sont vivement débattus), il est agréable de voir les gardiens CSS adopter les idées avancées par les pré-processeurs..
Si vous utilisez des fonctions de manipulation de la couleur préprocesseur, vous apprécierez cette fonctionnalité en CSS natif. La fonction color-mod () prend une couleur existante et applique zéro ou plus "ajusteurs de couleur" qui spécifient comment manipuler le résultat final.
nav arrière-plan: color-mod (# 79d3e2 teinte (360) saturation (100%));
Le développement en est à ses débuts et, même s’il existe des polyfill disponibles, la syntaxe change fréquemment (le couleur-mod l'habitude d'être Couleur, par exemple).
Tyler Gaw a créé un outil vraiment soigné (colorme.io) qui vous permet d’expérimenter avec tous les ajusteurs de couleurs possibles.
colorme.ioLa spécification de la fonction color-mod () est actuellement en mode brouillon via le groupe de travail CSS..
De la même manière que jQuery a contribué à améliorer le Web, il existe donc des pré-processeurs pour CSS. Des langues telles que Sass ont contribué à ouvrir la voie à de nouvelles idées et approches non encore considérées par les auteurs de spécifications CSS..
J'espère que les nouvelles fonctionnalités dont nous avons parlé vous inciteront à les utiliser dans votre propre travail. Je vous encourage à envisager d'utiliser la fonctionnalité native sur un préprocesseur chaque fois que cela est possible.!
Accentsconagua