一 、如何引路入less檔案
1）使用官方插件 less.min.js
步驟一：插件下載地址：https://github.com/less/less.js
步驟二：下好插件后找到js檔案路徑，如下圖：
步驟三：將less.min.js/less.js復制到專案js檔案路徑下
步驟四：創建一個less樣式檔案
步驟五：頁面呼叫less樣式檔案（格式一定要寫對！）
(寫到這一步less就參考成功了，想要改樣式就直接在less檔案里改，這種方法是在頁面上將less檔案編譯成css檔案，讓網頁能讀懂，是屬于比較簡單的一種方法)
方法二：下載Koala工具編譯
下載地址：http://koala-app.com/
步驟一：官網下載Koala
步驟二：打開Koala，點擊設定可以進行語言設定
步驟三：點擊加號鍵匯入less檔案
步驟四：執行編譯
步驟五：執行編譯后在原檔案less下會自動生產一個css檔案
這個css檔案就通過轉義less檔案轉義出來的css檔案，你在less檔案里的任何修改都會時刻轉義到css檔案里
這樣子我們就可以跟參考css一樣的來使用less檔案了
二 、less的使用方法
方法一：直接宣告
less中：
@color:blue;
header{
color:@color;
}
@color:yellow;
footer{
background-color: @color;
}
css轉義后：
header {
color: #ffff00;
}
footer {
background-color: #ffff00;
}
html：
<header>
Hello Less
</header>
方法二：直接宣告（宣告方法，可帶引數）
less中：
//定義方法
.background(@background:yellow,@width:500px){
width: @width;
height: 200px;
background: @background;
border-radius: @width/2;
float: left;
}
.font-style(@font-family:"Lucida Sans",@color:red){
font-size: 16px;
font-family: @font-family;
color: @color;
}
//呼叫方法默認值
.bgc {
.background();
/*默認值*/
}
.f-sty{
.font-style(@font-family: "");
}
//呼叫方法帶多個引數
.bgc2{
.background(red,100px);
.font-style("Lucida Sans",blue);
}
css轉義后：
.bgc {
width: 500px;
height: 200px;
background: #ffff00;
border-radius: 250px;
float: left;
/*默認值*/
}
.f-sty {
font-size: 16px;
font-family: "";
color: #ff0000;
}
.bgc2 {
width: 100px;
height: 200px;
background: #ff0000;
border-radius: 50px;
float: left;
font-size: 16px;
font-family: "Lucida Sans";
color: #0000ff;
}
html：
<div >submit</div>
方法三：嵌套（可多層嵌套）
less中：
#div1{
color: red;
.div2{
height: 50px;
border: 1px red solid;
}
.div3{
color: yellow;
}
.div4{
font-size: 14px;
.div5{
color: #0dcaf0;
.div6{
color: lightcoral;
}
}
}
}
css轉義后：
#div1 {
color: red;
}
#div1 .div2 {
height: 50px;
border: 1px red solid;
}
#div1 .div3 {
color: yellow;
}
#div1 .div4 {
font-size: 14px;
}
#div1 .div4 .div5 {
color: #0dcaf0;
}
#div1 .div4 .div5 .div6 {
color: lightcoral;
}
html中：
<div id="div1">
<div >div2</div>
<div >div3</div>
<div >
<div >
<div >lightcoral</div>
</div>
</div>
</div>
方法三：作用域
less中：
@len:30px;
.font-size{
@len:30px;//這個@len在里面宣告，優先級更高
font-size: @len;//50px
}
@len:12px;//這里@len重新宣告了，所以@len為12px;但是小于上面，font-size的優先級
.font-size2{
font-size: @len;//12px
}
#div1{
color: red;
.div2{
height: 50px;
border: 1px red solid;
}
.div3{
color: yellow;
}
.div4{
font-size: 14px;
.div5{
color: #0dcaf0;
.div6{
color: lightcoral;
}
}
}
}
css轉義后：
.font-size {
font-size: 30px;
}
.font-size2 {
font-size: 12px;
}
html中：
<div >@len:30px;</div>
<div >@len:12px;</div>
方法三：作用域
less中：
.width(@frequency) when (@frequency>0){//@frequency是我們自己宣告的，當我們宣告的這個大于0時往下執行
.width((@frequency - 1));//呼叫自己
height: (10px * @frequency);//每次呼叫自己的時候執行的操作
border: 1px red solid;
}
.span{
.width(5);呼叫方法；（5）執行的次數
}
css轉義后：
.span {
height: 10px;
height: 20px;
height: 30px;
height: 40px;
height: 50px;
border: 1px red solid;
}
html中：
<div >123</div>
<div >123</div>
<div >123</div>
<div >123</div>
<div >123</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449106.html
標籤：其他