Lorsque Sass et les nouvelles fonctionnalités CSS sont collitées

CSS a récemment ajouté de nombreuses fonctionnalités intéressantes, telles que les propriétés personnalisées et les nouvelles fonctions. Bien que ces fonctionnalités puissent simplifier notre travail, ils peuvent également créer des problèmes d'interaction intéressants avec des préprocesseurs tels que SASS.

Cet article explorera les problèmes que j'ai rencontrés, les solutions et pourquoi je pense toujours que Sass est essentiel.

Erreur rencontrée

Si vous avez utilisé les nouvelles fonctions min() et max() , vous pouvez rencontrer un message d'erreur comme celui-ci lorsque vous gérez différentes unités: "Unités incompatibles: VH et EM".

En effet, Sass a sa propre fonction min() et ignore la fonction min() de CSS . De plus, SASS ne peut effectuer aucun calcul en utilisant des valeurs qui n'ont pas de relation fixe entre deux unités.

Par exemple, il existe une relation fixe entre CM et dans les unités, afin que SASS puisse calculer le résultat de min(20in, 50cm) et ne signalera pas d'erreur lorsqu'elle est utilisée dans le code.

Il en va de même pour les autres unités. Par exemple, il existe une relation fixe entre les unités d'angle: 1 Turn, 1rad ou 1 Grad est toujours calculée comme la même valeur de deg. De même, 1S est toujours 1000 ms, 1 kHz est toujours 1000 Hz, 1DPPX est toujours 96dpi et 1 pouce est toujours 96px. C'est pourquoi Sass peut se convertir entre eux et les mélanger dans les calculs et les fonctions (comme sa propre fonction min() ).

Cependant, lorsqu'il n'y a pas de relation fixe entre ces unités (comme les exemples précédents d'unités EM et VH), des problèmes surviennent.

Ce n'est pas seulement une autre unité. Essayer d'utiliser calc() min() entraînera également une erreur. Si j'essaye un code comme calc(20em 7px) j'obtiens une erreur que " calc(20em 7px) n'est pas un nombre pour min ".

Un autre problème se pose lorsque nous voulons utiliser le résultat d'une fonction CSS CSS ou mathématique tel que calc() , min() ou max() ) dans un filtre CSS (par exemple invert() ).

Dans ce cas, nous recevrons une invite que "" $ couleur: "var (- p, 0,85)" n'est pas une couleur valide pour Invert ".

Le même problème se produit grayscale() : " $color: 'calc(.2 var(--d, .3))' n'est pas une couleur valide pour l'échelle de gris".

opacity() cause également le même problème: " $color: 'var(--p, 0.8)' n'est pas une couleur valide pour l'opacité".

Cependant, d'autres fonctions de filtre - y compris sepia() , blur() , drop-shadow() , brightness() , contrast() et hue-rotate() - Tous fonctionnent correctement avec les variables CSS!

Il s'avère que ce qui s'est passé est similaire aux problèmes min() et max() . Sass n'a pas de sepia() , blur() , drop-shadow() , brightness() , contrast() , hue-rotate() , mais il a ses propres fonctions grayscale() , invert() et opacity() , et leur premier argument est $color . Puisqu'il ne peut pas trouver le paramètre, une erreur est lancée.

Pour la même raison, nous avons également des problèmes lorsque nous essayons d'utiliser des variables CSS qui répertorient au moins deux valeurs hsl() ou hsla() .

D'un autre côté, color: hsl(9, var(--sl, 95%, 65%)) est un CSS entièrement valide et fonctionne bien sans SASS.

La même chose se produit exactement aux fonctions rgb() et rgba() .

De plus, si nous importons la boussole et essayons d'utiliser des variables CSS à l'intérieur linear-gradient() ou radial-gradient() , même si nous utilisons des variables à l'intérieur conic-gradient() (si le navigateur le prend en charge), nous obtiendrons également une autre erreur.

En effet, la boussole est livrée avec des fonctions linear-gradient() et radial-gradient() , mais conic-gradient() n'a jamais été ajoutée.

Le problème dans tous ces cas provient de Sass ou de Compass ayant des fonctions du même nom, et en supposant que ce sont les fonctions que nous avons l'intention d'utiliser dans notre code.

Oups!

Solution

L'astuce ici est de se rappeler que Sass est sensible à la casse, mais CSS n'est pas sensible à la casse .

Cela signifie que nous pouvons écrire Min(20em, 50vh) que Sass ne reconnaîtra pas comme sa propre fonction min() . Aucune erreur n'est lancée, elle est toujours valide CSS et fonctionne comme prévu. De même, l'écriture HSL() / HSLA() / RGB() / RGBA() ou Invert() peut éviter les problèmes que nous avons eu auparavant.

Quant aux gradients, je préfère généralement linear-Gradient() et radial-Gradient() car il est plus proche de la version SVG, mais cela fonctionne bien avec au moins une lettre majuscule.

Pourquoi?

Presque chaque fois que je publie des tweets liés à SASS, je serai averti qu'avec les variables CSS, Sass ne devrait plus être utilisé. Je veux résoudre ce problème et expliquer pourquoi je ne suis pas d'accord.

Premièrement, bien que j'ai trouvé que les variables CSS étaient très utiles et utilisées dans presque tous les aspects au cours des trois dernières années, il est important de noter qu'ils sont livrés avec des coûts de performance et il peut être douloureux d'utiliser les Devtools actuels pour suivre où les erreurs apparaissent dans calc() . J'essaie d'éviter de les trop utiliser afin de ne pas rester coincé dans une situation où les lacunes de leur utiliser l'emportent sur les avantages.

D'une manière générale, si cela fonctionne comme une constante, ne change pas d'élément par éléments ou de l'état par état (auquel cas un attribut personnalisé est certainement la meilleure option), ou réduit le nombre de CSS compilés (résout les problèmes en double créés par les préfixes), puis j'utiliserai une variable SASS.

Deuxièmement, les variables ont toujours été une petite partie de la raison pour laquelle j'utilise Sass. Lorsque j'ai commencé à utiliser SASS fin 2012, il a été principalement utilisé pour les boucles, qui est une fonctionnalité que nous n'avons toujours pas dans CSS pour le moment. Bien que j'aie déplacé une partie de la boucle vers le préprocesseur HTML (car il réduit le code généré et évite d'avoir à modifier à la fois HTML et CSS plus tard), j'utilise toujours des boucles SASS dans de nombreux cas, telles que la génération d'une liste de valeurs, des listes d'arrêt dans les fonctions de gradient, des listes de points dans les fonctions de polygon, les listes de transformation, et ainsi de suite.

(Le contenu suivant est cohérent avec le texte d'origine, en omettant des pièces en double pour éviter la redondance)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!