Maison > Article > interface Web > Comment utiliser le préprocesseur CSS
Parfois, des conflits de code peuvent survenir dans CSS et les variables, calculs arithmétiques, etc. ne peuvent pas être effectués. En utilisant le préprocesseur CSS, vous pouvez écrire des programmes tels que des variables de proximité et des calculs à quatre règles. Par conséquent, l'article suivant vous expliquera comment utiliser le préprocesseur CSS.
Jetons un coup d'oeil d'abordQu'est-ce qu'un préprocesseur CSS ?
Le CSS par défaut est une description impossible à réaliser jusqu'à présent. Le préprocesseur CSS doit décrire efficacement le CSS. Cependant, les préprocesseurs CSS ne peuvent pas être utilisés dans les navigateurs.Principaux types de préprocesseurs
SassSass est un fichier CSS qui convertit scsss, et l'extension est ".scss" en utilisant des variables et des formules ajoutées aux styles de programmation CSS. Vous pouvez créer "style.css" en convertissant (compilant) le fichier Sass de "style.scss". Pour l'utiliser, vous devez installer Ruby. LESSLESS convertit (compile) MOINS de fichiers comme Sass. Le concept de variable peut être moindre, vous pouvez donc la calculer, ou vous pouvez l'écrire de manière hiérarchique. Cependant, si node.js n'est pas installé pour utiliser "style.less", "style.css" ne sera pas converti.Regardons un exemple spécifique
Comment écrire LESSHTML<h1>hello,php中文网!</h1> <h2>hello,php中文网!</h2>MOINS
@mycolor: blue; h1 { font-size: 30px; font-color: @mycolor; } h2 { font-size: 20px; font-color: @mycolor; }L'effet d'affichage du navigateur est le suivant : HTML
<h1>hello,php中文网!</h1> <h2>hello,php中文网!</h2>style .css
h1 { font-size: 30px; font-color: blue; } h2 { font-size: 20px; font-color: blue; }Dans ce cas, si vous souhaitez changer la couleur, dans le cas de tous les changements, si vous souhaitez modifier 2 h1h2, utilisez des variables pour décrire comme suit.
@mycolor: blue; h1 { font-size: 30px; font-color: @mycolor; } h2 { font-size: 20px; font-color: @mycolor; }
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!