Que signifie moins en CSS ?

En CSS, less est un langage de prétraitement qui étend le langage CSS pour rendre CSS plus facile à maintenir et à étendre ; less est également un préprocesseur qui permet des styles personnalisables, gérables et réutilisables pour les tableaux de sites Web afin qu'ils puissent être lus via un navigateur Web. .

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Que signifie less en CSS ?

Less est un langage de prétraitement CSS Il étend le langage CSS et ajoute des variables, des mixins, des fonctions et d'autres fonctionnalités pour rendre CSS plus facile à maintenir et à développer.

LESS est un préprocesseur CSS qui permet des feuilles de style personnalisables, gérables et réutilisables pour les sites Web. LESS est un langage de feuille de style dynamique qui étend les capacités du CSS. LESS est également compatible avec tous les navigateurs.

Un préprocesseur CSS est un langage de script qui étend le CSS et le compile dans une syntaxe CSS standard afin qu'il puisse être lu par un navigateur Web. Il fournit des fonctionnalités telles que des variables, des fonctions, des mixins et des actions pour créer du CSS dynamique.

Less nous permet de définir des variables, d'utiliser des déclarations imbriquées, de définir des fonctions, etc. À proprement parler, Less se compose de deux parties : (1) Moins de syntaxe et (2) Moins de préprocesseur. Après tout, les navigateurs ne comprennent que CSS, les fichiers Less doivent donc être compilés en CSS via le préprocesseur Less.

L'exemple est le suivant :

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

La sortie sous forme de code CSS est la suivante :

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!