Comment installer et utiliser Less-js tutoriel-php.cn

Comment installer et utiliser Less

php中世界最好的语言

Libérer： 2018-05-31 11:49:40

original

1051 Les gens l'ont consulté

Cette fois, je vais vous montrer comment installer et utiliser Less, et quelles sont les précautions pour installer et utiliser Less. Voici un cas pratique, jetons un coup d'oeil.

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>

Copier après la connexion

style.less

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

Copier après la connexion

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

Copier après la connexion

Mixtes

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

Copier après la connexion

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

Copier après la connexion

•Fonctionnement

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

Copier après la connexion

•Fonction fixe

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

Copier après la connexion

•Annotation

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

Copier après la connexion

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 :

node+koa2+mysql+bootstrap pour construire le front et le back end du forum

Ceci en JS pointe vers des exemples d'utilisation Explication détaillée

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!