Explication détaillée de Moins d'étapes d'installation et d'utilisation-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-12 13:55:32

original

2610 Les gens l'ont consulté

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>

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 :

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!