Parlez de 3 types de préprocesseurs en CSS

Cet article vous présentera trois types de préprocesseurs CSS et les comparera pour comprendre les différences entre eux. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Introduction

Le préprocesseur CSS définit un nouveau langage L'idée de base est d'utiliser un langage de programmation spécialisé, les développeurs. Il suffit d'utiliser ce langage pour le travail de codage, ce qui réduit le processus ennuyeux d'écriture de code CSS. En même temps, cela peut rendre votre code CSS plus concis, plus adaptable, plus lisible et plus hiérarchique. d'autres avantages.

Il existe de nombreux types de préprocesseurs CSS. Les trois préprocesseurs CSS traditionnels sont Less, Sass (Scss) et Stylus. Leurs origines respectives sont les suivantes :

Sass : né en 2007, le plus ancien ; Le préprocesseur CSS le plus mature, avec le support de la communauté Ruby et Compass, le framework CSS le plus puissant.

Actuellement influencé par LESS, il a évolué vers SCSS qui est entièrement compatible avec CSS (SCSS nécessite l'utilisation de points-virgules et d'accolades au lieu de sauts de ligne et de retraits).

Moins : apparu en 2009. Il est fortement influencé par SASS, mais il utilise également la syntaxe CSS, ce qui facilite le démarrage de la plupart des développeurs et des concepteurs. Il a beaucoup plus de partisans en dehors de la communauté Ruby. TOUPET.

L'inconvénient est que par rapport au SASS, ses fonctions programmables sont insuffisantes.

Cependant, l'avantage est qu'il est simple et compatible avec CSS, ce qui à son tour a influencé l'évolution de SASS vers l'ère de SCSS. Le célèbre Twitter Bootstrap utilise LESS comme langage sous-jacent.

Stylus : Produit en 2010, par la communauté Node.js.

est principalement utilisé pour fournir un support de prétraitement CSS pour les projets Node. Il a certains partisans dans cette communauté, mais au sens large, sa popularité n'est pas aussi bonne que SASS et LESS.

2. Comparaison

La chose la plus importante avant d'utiliser le préprocesseur CSS est de comprendre la syntaxe. Heureusement, fondamentalement, la syntaxe de la plupart des préprocesseurs est la même que celle du CSS. . presque.

Tout d'abord, Sass et Less utilisent la syntaxe CSS standard, donc si vous pouvez facilement convertir le code CSS existant en code de préprocesseur, Sass utilise l'extension .sass par défaut, tandis que Less utilise less.

h1 {
  color: #0982C1;
}

C'est une syntaxe très courante, mais Sass prend également en charge l'ancienne syntaxe, qui n'inclut pas les accolades et les points-virgules :

h1
  color: #0982c1

Et Stylus prend en charge plus de syntaxes. Pour être plus flexible, il utilise l'extension de fichier .styl par défaut. Voici la syntaxe prise en charge par Stylus :

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

Vous pouvez utiliser différentes variables dans la même feuille de style. Par exemple, la méthode d'écriture suivante ne signalera pas d'erreur :

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

Recommandations associées :

Résumé des questions d'entretien avec vue frontale 2020 (avec réponses)

tutoriel vue recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation ! !

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!