Maison > Article > interface Web > Explication détaillée de Moins d'étapes d'installation et d'utilisation

Explication détaillée de Moins d'étapes d'installation et d'utilisation

php中世界最好的语言original: 2018-05-12 13:55:322551parcourir

Cette fois, je vais vous donner une explication détaillée des étapes d'installation et d'utilisation de Less. Quelles sont les précautions pour l'installation et l'utilisation de Less. Voici un cas pratique, jetons un coup d'œil.

Installation de node.js

Site officiel : http://nodejs.cn/

Vérifiez si l'installation a réussi sur la ligne de commande

Passer au répertoire du projet et initialiser un fichier .json du package

Installer et désinstaller le package jQuery (exemple) Installer

Désinstaller

Installer le miroir Taobao

2. Installer moins

Essayez :

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" />
</head>
<body>
<p id="box">
  <ul>
    <li>你好</li>
    <li>hello</li>
  </ul>
</p>
</body>
</html>

style.less

#box{
 width:200px;
 height:200px;
 background-color:blue;
 ul{
  color:white;
  li{
   line-height:50px;
  }
 }
}

Entrez lessc xxx.less xxx.css dans la ligne de commande,

est la suivante :

Ouvrez test.html avec un navigateur pour voir l'effet 3. Utilisation de base de less

https://less.bootcss.com/

Variables

@red:red;
@w:200px;
#big{
  width:@w;
  height:@w;
  background-color:@red;
  #small{
    width:@w;
    height:@w;
    background-color:@red;
  }
}
p{
  color:@red;
}

Mixtes

.bt{
  width:200px;
  height:200px;
  border-top:2px solid red;
  background-color:red;
}
#big{
  .bt;
  #small{
    .bt;
  }
}

• Imbriquées

#box{
  width:100%;
  height:60px;
  background-color:#ccc;
  h3{
    width:100%;
    height:20px;
    background-color:yellow;
  }
  ul{
    list-style:none;   
    li{
      height:40px;
      line-height:40px;
      float:left;
      padding:0 10px;
    }
  }
}

•Fonctionnement

@color:#333;
#box{
  width:100%;
  height:60px;
  background-color:@color+#111;
}
•calc()
@var:50vh/2;
#box{
  width:calc(50% + (@var - 20px));
}

•Fonction fixe

@base:#f04615;
@width:0.5;
#box{
  width:percentage(@width);
  color:saturate(@base,5%);
  background-color:spin(lighten(@base,25%),8);
}

•Annotation

//单行注释//
/*多行
 注释*/
•引入其他less文件
@import "other.less";

Je crois que vous maîtrisez la méthode après avoir lu le cas Dans cet article, venez pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quels BUG et erreurs se produisent souvent dans JS

Comment afficher les informations personnelles et changer le mot de passe dans vue

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des étapes pour développer directement des applications PWA à l'aide de @angular/cli V6.0Article suivant：Explication détaillée des étapes pour développer directement des applications PWA à l'aide de @angular/cli V6.0

Articles Liés

Voir plus