Introduction aux méthodes d'utilisation de moins (variables, mélange, appariement, opérations, imbrication)

Comment utiliser moins et certains éléments couramment utilisés (variables, mélange, correspondance, opérations, imbrication)

Moins d'outils d'introduction et de compilation

Qu'est-ce qui est moins

1.LESSCSS est un langage de style dynamique et un type de langage de prétraitement CSS. Il utilise une syntaxe similaire au CSS et donne au CSS les caractéristiques d'un langage dynamique, telles que les variables, l'l'héritage, opérations, fonctions, etc., facilitant l'écriture et la maintenance du CSS.
LESSCSS peut être utilisé dans plusieurs langues et environnements, notamment les navigateurs, les clients de bureau et les serveurs.

moins d'outil de compilation

1. Koala Koala -- s'il n'y a pas de dossier CSS créé lors de la compilation, Koala en générera automatiquement un pour vous
   Comment définir la langue
   
   Comment compiler
   -

2. Laisser Webstorm prendre en charge moins de compilation :

• Installernode.js --- Il s'agit d'un outil de gestion de packages qui sera utilisé à l'avenir

• WIN R

• Entrez npm install less

....

moins de grammaire

Ps : Les points de connaissance suivants utiliseront les points de connaissance ci-dessus (par exemple, des variables seront utilisées dans le mixage pour approfondir l'impression ^_^)

1. Commentaire

• // Affiché uniquement en moins
  

• /**/ sera

variable

• moins est affichée dans le fichier CSS

  @ly_width:100px;
  .box {
  width:@ly_width;
  }

• Après la compilation, ce qui est affiché en CSS est

  .box {
  width:100px;
  }

• Utilisez @

pour. définir des variables

Mixtes

• Résoudre la compatibilité bordure-rayon

  .border_radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
  }

• moins d'écriture

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border(@border_width:3px;) {
  border:@border_width solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border();
  }

• Après compilation, ce qui est affiché en css est

  .one {
  width: 100px;
  height: 200px;
  background-color: #008000;
  border: 3px solid #ff0000;
  }

• moins écrit en

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border(@border_width) {
  border:@border_width solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border(1px);
  }

• Après compilation, ce qui est affiché en CSS est

  .one {
  width: 100px;
  height: 200px;
  background-color: #008000;
  border: 1px solid #ff0000;
  }

• Premièrement, si vous souhaitez utiliser le code en moins Que dois-je faire si j'applique le style .border dans .one

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border {
  border:1px solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  }

• s'écrit comme suit

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border {
  border:1px solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border;
  }

• après compilation en CSS Montré est

  
  .border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

• Mélanger sans paramètres

• Mélanger avec paramètres -- -Sans valeur par défaut (vous pouvez passer plusieurs paramètres, séparés par des virgules ou des points-virgules, il est recommandé d'utiliser des points-virgules. Ce qui suit prend un paramètre comme exemple)

• Mélange avec des paramètres --- Avec valeur par défaut (plusieurs paramètres peuvent être transmis, un paramètre est utilisé comme exemple)

• Il est souvent utilisé lors de la résolution de la compatibilité CSS3

Modèle de correspondance

• Écrire en moins

  //定义上,下,左,右边框的样式
  .border(top;@border_width:5px;@border_color:red){
  border-top:@border_width solid @border_color;
  }
  .border(bottom;@border_width:5px;@border_color:red){
  border-bottom:@border_width solid @border_color;
  }
  .border(left;@border_width:5px;@border_color:red){
  border-left:@border_width solid @border_color;
  }
  .border(right;@border_width:5px;@border_color:red){
  border-right:@border_width solid @border_color;
  }
  //如果想写通用的样式 可以在下面的代码中写 格式是固定的 
  .border(@_,@border_width:5px;@border_color:red){
  border-color:yellow;
  }
  .border_use1 {
  //选择和if差不多 如果是left就调用上面对应的
  .border(left);
  }
  .border_use2 {
  //选择和if差不多 如果是right就调用上面对应的
  .border(right);
  }

• Après compilation, ce qui est affiché en CSS est

  .border_use1 {
  border-left:5px solid #ff0000;
  border-color:yellow;
  }
  .border_use2 {
  border-right:5px solid #ff0000;
  border-color:yellow;
  }

• peut être compris comme s'il était quelque peu similaire au mélange ci-dessus

Fonctionnement

less est

• @ly_width:100px;
  .one {
  width:@ly_widht + 100;
  }

qui est affichée en CSS après la compilation est

• .one {
  width:200px;
  }

Les opérations fournissent des opérations d'addition, de soustraction, de multiplication et de division, et peuvent également effectuer des opérations sur les valeurs d'attribut et les couleurs...

Imbrication

Structure HTML

• <p class="one">
  <p class="two"></p>
  </p>

Écrire en moins

• @ly_width:100px;
  @ly_height:200px;
  @ly_color:red;
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .two {
      background-color: green;
  }
  }

Après la compilation Ce qui est affiché en CSS est

• .one {
  width: 100px;
  height: 200px;
  background-color: #ff0000;
  }
  .one .two {
    background-color: green;
  }

Vous pouvez imbriquer un autre sélecteur dans un sélecteur, et le code ressemblera à hiérarchique, améliorant la maintenabilité du code

@arguments variable

Comment écrire en moins

• //和前面提到的混合一起举个栗子  
  .border(@border_width;@border_style;@border_color){
  border:@arguments;
  }
  .one {
  .border(1px;solid;red);
  }

Ce qui est affiché dans le CSS après la compilation est >

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!