Dieses Mal zeige ich Ihnen, wie Sie Less installieren und verwenden und welche Vorsichtsmaßnahmen für die Installation und Verwendung von Less gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Installation von node.js
Offizielle Website: http://nodejs.cn/
Überprüfen Sie auf der Kommandozeile, ob die Installation erfolgreich ist
Wechseln Sie in das Projektverzeichnis und eine Paket-.json-Datei initialisieren
jQuery-Paket installieren und deinstallieren (Beispiel) Installieren
Deinstallieren
Taobao-Spiegel installieren
2. Weniger installieren
Probieren Sie es aus:
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;
}
}
}Geben Sie lessc xxx.less xxx.css in die Befehlszeile ein,
Wie folgt:
Öffnen Sie test.html mit einem Browser, um den Effekt zu sehen. 3. Grundlegende Verwendung von weniger
https:// less.bootcss.com/
Variable
@red:red;
@w:200px;
#big{
width:@w;
height:@w;
background-color:@red;
#small{
width:@w;
height:@w;
background-color:@red;
}
}
p{
color:@red;
}Gemischt
.bt{
width:200px;
height:200px;
border-top:2px solid red;
background-color:red;
}
#big{
.bt;
#small{
.bt;
}
}• Verschachtelt
#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;
}
}
}• Operation
@color:#333;
#box{
width:100%;
height:60px;
background-color:@color+#111;
}
•calc()
@var:50vh/2;
#box{
width:calc(50% + (@var - 20px));
}•Feste Funktion
@base:#f04615;
@width:0.5;
#box{
width:percentage(@width);
color:saturate(@base,5%);
background-color:spin(lighten(@base,25%),8);
}•Anmerkung
//单行注释// /*多行 注释*/ •引入其他less文件 @import "other.less";
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!
Empfohlene Lektüre:
node+koa2+mysql+bootstrap zum Erstellen des Front- und Backends des Forums
Dies in JS verweist auf Anwendungsbeispiele Detaillierte Erklärung
Das obige ist der detaillierte Inhalt vonSo installieren und verwenden Sie Less. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
