Vous n'avez pas besoin d'un préprocesseur CSS

Le CSS natif a parcouru un long chemin ces derniers mois/années. Dans cet article, je vais passer en revue les principales raisons pour lesquelles les gens ont utilisé des préprocesseurs CSS tels que SASS, LESS et Stylus, et vous montrer comment vous pouvez accomplir ces mêmes choses avec du CSS natif.

Séparer les fichiers

La séparation des fichiers est l'une des principales raisons pour lesquelles les gens ont recours à un préprocesseur. Depuis un certain temps maintenant, vous pouvez importer un autre fichier dans un fichier CSS. Ça ressemble à ça.

@import url("./utils.css");

Vous pouvez utiliser un chemin relatif ou absolu, de la même manière que vous le feriez pour un href sur une balise d'ancrage, ou toute autre ressource.

La principale différence entre ceci et un pré-processeur serait que même si un pré-processeur se combinerait à la compilation, CSS va faire une requête http au moment de l'exécution.

Règles d'imbrication

Ok, c'est la principale raison d'utiliser un pré-processeur. Au moins, c'est la principale raison pour laquelle j'en ai utilisé un dans le passé.

Mais CSS prend désormais en charge l'imbrication, et il fonctionne principalement comme vous en avez l'habitude en utilisant des pré-processeurs.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

Assez génial, quel énorme avantage d'écrire du CSS comme nous le faisons depuis des décennies.

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

Sélecteurs Sudo

Les sélecteurs Sudo fonctionnent de la même manière en CSS natif que celui auquel vous êtes peut-être habitué avec les préprocesseurs.

button {
  color: blue;

  &:hover {
    color: purple;
  }
}

Vous pouvez en savoir plus sur l'imbrication sur MDN.

Variables

Les préprocesseurs ont longtemps été motivés par les variables. Vous pouvez avoir toutes vos couleurs, espacements, etc. dans un seul fichier et le mettre à jour globalement partout.

Eh bien, vous pouvez le faire en CSS natif maintenant, pendant un certain temps. En fait, à plusieurs égards, c'est mieux que les préprocesseurs.

Variables globales

Les variables globales sont enfermées dans une règle :root. Ceux-ci peuvent être référencés n’importe où.

:root {
  --bg-color: #333;
}

Pour utiliser une variable, il faut qu'elle soit référencée avec la balise var

button {
  background-color: var(--bg-color);
}

Variables étendues

Vous pouvez également définir des variables sur des sélecteurs, par exemple...

header {
  --bg-color: #999;
}

Donc, dans ce cas, en faisant référence à var(--bg-color); dans le sélecteur d'en-tête entraînera #999 ;

Réaffectation des valeurs au moment de l'exécution

Donc, le principal avantage des variables CSS par rapport à un pré-processeur est qu'elles peuvent être remplacées au moment de l'exécution, alors qu'un pré-processeur une fois compilé est permanent.

Par exemple, si vous avez un site Web sur lequel vous souhaitez prendre en charge les modes clair et sombre. Ceci peut être réalisé très facilement en utilisant des variables CSS.

:root {
  --bg-color: white;
}

body {
  background-color: var(--bg-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
  }
}

Pour réaliser quelque chose comme ça avec un pré-processeur, vous devrez basculer une classe sur le corps en utilisant Javascript et remplacer toutes les règles avec une classe .dark ou quelque chose du genre.

Calcul

La plupart des préprocesseurs tels que LESS, Stylus ou SASS vous permettent de faire des calculs sur des choses. Comme si vous voulez diviser une variable en deux ect.

Vous pouvez le faire en CSS natif en utilisant la fonction calc.

@import url("./utils.css");

c'est pas cool ?

Transformer les couleurs

Donc, une autre fonctionnalité populaire (du moins pour moi) est d'éclaircir et d'assombrir les couleurs dans un pré-processeur CSS. Vous pouvez désormais le faire en CSS natif également en utilisant color-mix.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

Ce qui précède serait l'équivalent de ce que vous avez l'habitude de faire avec un éclaircissement (rouge, 50 %) dans un préprocesseur.

Pour foncer, mélangez simplement avec du noir au lieu du blanc

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

J'espère que la prochaine fois que vous choisirez les outils à utiliser sur un projet, vous essaierez le CSS natif. Un long chemin a été parcouru.

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!