Comment utiliser le préprocesseur CSS-tutoriel CSS-php.cn

Comment utiliser le préprocesseur CSS

不言

Libérer： 2018-11-28 09:08:46

original

4112 Les gens l'ont consulté

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.

Bien qu'il existe différents Sass et Less, cela semble encore difficile à décrire en CSS jusqu'à présent, mais on l'appelle "nouvelle version étendue CSS".

Principaux types de préprocesseurs

Sass

Sass 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.

LESS

LESS 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 LESS

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

Copier après la connexion

MOINS

@mycolor: blue;
h1 {
    font-size: 30px;
    font-color: @mycolor;
}
h2 {
    font-size: 20px;
    font-color: @mycolor;
}

Copier après la connexion

L'effet d'affichage du navigateur est le suivant :

Comment utiliser le préprocesseur CSS

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

Copier après la connexion

style .css

h1 {
    font-size: 30px;
    font-color: blue;
}
h2 {
    font-size: 20px;
    font-color: blue;
}

Copier après la connexion

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;
}

Copier après la connexion

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!