Explication détaillée du préprocesseur CSS Moins

Préprocesseur CSS

Pourquoi il existe un préprocesseur CSS

CSS est fondamentalement un outil de concepteur, pas un outil de programmeur. Aux yeux des programmeurs, CSS est un casse-tête. Contrairement à d'autres langages de programmation, tels que PHP, Javascript, etc., il possède ses propres variables, constantes, instructions conditionnelles et une certaine syntaxe de programmation. est assez long à écrire et le code est difficile à organiser et à maintenir.

Naturellement, certaines personnes ont commencé à se demander si certains éléments de programmation pouvaient être ajoutés au CSS comme d'autres langages de programmation, afin que CSS puisse effectuer certains traitements prédéterminés comme d'autres langages de programmation. De cette façon, il existe un « préprocesseur CSS ».

Qu'est-ce qu'un préprocesseur CSS ?

C'est un sur-ensemble du langage CSS et est plus complet que CSS.

Le préprocesseur CSS définit un nouveau langage. L'idée de base est la suivante : utiliser un langage de programmation spécialisé pour ajouter certaines fonctionnalités de programmation au CSS, utiliser CSS comme cible pour générer des fichiers, puis les développeurs utilisent simplement ce langage pour coder. travail.

En termes simples, le préprocesseur CSS utilise un langage de programmation spécialisé pour concevoir les styles de pages Web, puis le compile dans un fichier CSS normal pour une utilisation dans le projet. Le préprocesseur CSS ajoute certaines fonctionnalités de programmation au CSS sans avoir à prendre en compte les problèmes de compatibilité du navigateur. Par exemple, vous pouvez utiliser des variables, des programmes logiques simples, des fonctions, etc. en CSS. Certaines fonctionnalités de base des langages de programmation vous permettent d'utiliser davantage de CSS. concis, plus adaptable, plus lisible, plus facile à maintenir et bien d’autres avantages.

La technologie des préprocesseurs CSS est très mature et de nombreux langages de préprocesseurs CSS différents ont émergé, tels que : Sass (SCSS), LESS, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS, etc. Il y a tellement de préprocesseurs CSS, donc "Quel préprocesseur CSS dois-je choisir ?" est devenu récemment un sujet brûlant sur Internet, sur Linkedin, Twitter, CSS-Trick, Zhihu et les principaux forums techniques, de nombreuses personnes en discutent. Il s’agit d’un grand pas en avant par rapport à la question de savoir si nous devrions utiliser des préprocesseurs CSS.

Jusqu'à présent, parmi les nombreux excellents langages de préprocesseur CSS, Sass, LESS et Stylus sont les meilleurs, avec de nombreuses discussions et comparaisons. Cet article vous présentera ces trois langages de préprocesseur CSS à partir de leur arrière-plan, de leur installation, de leur syntaxe d'utilisation, de leurs différences et d'autres comparaisons. Je pense que les ingénieurs de développement front-end feront leur propre choix : quel préprocesseur CSS dois-je choisir ?

Introduction à less, less est un CSS de prétraitement populaire qui prend en charge les variables, les mixages, les fonctions, l'imbrication, les boucles et d'autres fonctionnalités. Syntaxe de

moins

Commentaires

Il peut y avoir deux types de commentaires pour moins.

Le premier type de commentaire : commentaire modèle

// Les commentaires ici dans le commentaire modèle seront supprimés après avoir été convertis en CSS

Car moins de besoins être converti en CSS avant de pouvoir être utilisé dans le navigateur. Après conversion en CSS, ce type de commentaire sera supprimé (après tout, CSS ne reconnaît pas ce type de commentaire).

Le deuxième type de commentaire : la syntaxe des commentaires CSS

/* La syntaxe des commentaires CSS est convertie en CSS puis conservée */

Résumé : Si écrit en moins Commentaires, nous vous recommandons d'écrire le premier type de commentaires. À moins qu’il ne s’agisse de quelque chose de similaire au droit d’auteur, le deuxième type d’annotation est utilisé.

Définir des variables

Nous pouvons définir des valeurs réutilisées ou fréquemment modifiées en tant que variables, et simplement référencer cette variable là où elle doit être utilisée. Cela évite beaucoup de duplications de travail.

(1) Dans le fichier less, définissez le format d'une variable :

@Nom de la variable : valeur de la variable //Format@bgColor : #f5f5f5; //Exemple de format

(2) En même temps, référencez cette variable dans le fichier less.

Enfin, le code complet du fichier less est le suivant :

main.less：
// 定义变量@bgColor: #f5f5f5;// 引用变量body{    background-color: @bgColor;}

Après avoir compilé le fichier less ci-dessus dans un fichier CSS (la section suivante parle de la compilation du fichier less fichier), le code généré automatiquement Comme suit :

main.css：
body{    background-color: #f5f5f5;}

Utiliser des sélecteurs enfants

imbriqués sont souvent utilisés en CSS L'effet peut être comme ceci :

.container {
  width: 1024px;}.container > .row {
  height: 100%;}.container > .row a {
  color: #f40;}.container > .row a:hover {
  color: #f50;}

Le code ci-dessus Il existe de nombreuses couches d'imbrication, ce qui rend l'écriture lourde. Mais si vous utilisez la syntaxe imbriquée de less pour écrire ce code, il sera plus concis.

Un exemple d'imbrication est le suivant :

main.less:
.container {  width: @containerWidth;  > .row {    height: 100%;    a {      color: #f40;      &:hover {        color: #f50;      }    }  }  div {    width: 100px;    .hello {      background-color: #00f;    }  }}

Après avoir compilé le fichier less ci-dessus dans un fichier CSS, le code généré automatiquement est le suivant :

main.css
.container {    width: 1024px;}.container > .row {    height: 100%;}.container > .row a {    color: #f40;}.container > .row a:hover {    color: #f50;}.container div {    width: 100px;}.container div .hello {    background-color: #00f;}

Je pense que vous l'avez lu. Vous maîtrisez les méthodes dans ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Les 20 expressions régulières les plus couramment utilisées en JavaScript

Paramètres courants pour vscode

Comment pour convertir un nombre décimal en hexadécimal

Comment implémenter un menu contextuel personnalisé de la souris dans JS

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!