So installieren und verwenden Sie Less-js-Tutorial-php.cn

So installieren und verwenden Sie Less

php中世界最好的语言

Freigeben： 2018-05-23 14:31:46

Original

1264 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Less installieren und verwenden und welche Vorsichtsmaßnahmen bei der Installation und Verwendung von Less gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

node.js ist ein Front-End-Framework, das mit einem Paketverwaltungstool npm geliefert wird

Installation von node.js

Offizielle Website: http://nodejs.cn /

Überprüfen Sie, ob die Installation erfolgreich war die Befehlszeile

In das Projektverzeichnis gewechselt und eine package.json-Datei initialisiert

Installation und Deinstallation von jQuery Paket (Beispiel) Installation

Deinstallieren

Taobao-Image installieren

2. Installation weniger

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>

Nach dem Login kopieren

style.less

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

Nach dem Login kopieren

Geben Sie lessc xxx.less xxx.css in die Befehlszeile ein,

wie folgt:

Open test .html mit einem Browser und werfen Sie einen Blick auf Effekt 3. Grundlegende Verwendung von less

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

Nach dem Login kopieren

Mischen

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

Nach dem Login kopieren

•Verschachteln

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

Nach dem Login kopieren

•Bedienung

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

Nach dem Login kopieren

•Feste Funktion

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

Nach dem Login kopieren

•Anmerkung

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

Nach dem Login kopieren

Ich glaube dir Ich habe die Methode gemeistert, nachdem ich den Fall in diesem Artikel gelesen habe. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Call and Apply in JS

Wie können Vue-Formulare automatisiert werden?

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!