一 、如何引路入less文件

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十多年品質(zhì)，值得信賴！

1）使用官方插件 less.min.js

步驟一：插件下載地址：https://github.com/less/less.js

步驟二：下好插件后找到j(luò)s文件路徑，如下圖：

步驟三：將less.min.js/less.js復(fù)制到項(xiàng)目js文件路徑下

步驟四：創(chuàng)建一個(gè)less樣式文件

步驟五：頁(yè)面調(diào)用less樣式文件（格式一定要寫對(duì)?。?/span>

(寫到這一步less就引用成功了，想要改樣式就直接在less文件里改，這種方法是在頁(yè)面上將less文件編譯成css文件，讓網(wǎng)頁(yè)能讀懂，是屬于比較簡(jiǎn)單的一種方法)

方法二：下載Koala工具編譯

下載地址：http://koala-app.com/

步驟一：官網(wǎng)下載Koala

步驟二：打開Koala，點(diǎn)擊設(shè)置可以進(jìn)行語(yǔ)言設(shè)置

步驟三：點(diǎn)擊加號(hào)鍵導(dǎo)入less文件

步驟四：執(zhí)行編譯

步驟五：執(zhí)行編譯后在原文件less下會(huì)自動(dòng)生產(chǎn)一個(gè)css文件

這個(gè)css文件就通過(guò)轉(zhuǎn)義less文件轉(zhuǎn)義出來(lái)的css文件，你在less文件里的任何修改都會(huì)時(shí)刻轉(zhuǎn)義到css文件里

這樣子我們就可以跟引用css一樣的來(lái)使用less文件了

二 、less的使用方法

方法一：直接聲明

less中：

@color:blue;
header{
    color:@color;
}
@color:yellow;

footer{
    background-color: @color;
}

css轉(zhuǎn)義后：

header {
  color: #ffff00;
}
footer {
  background-color: #ffff00;
}

html：

    Hello Less

方法二：直接聲明（聲明方法，可帶參數(shù)）

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;
}
//調(diào)用方法默認(rèn)值
.bgc {
    .background();
    /*默認(rèn)值*/
}
.f-sty{
    .font-style(@font-family: "");
}
//調(diào)用方法帶多個(gè)參數(shù)
.bgc2{
    .background(red,100px);
    .font-style("Lucida Sans",blue);
}

css轉(zhuǎn)義后：

.bgc {
  width: 500px;
  height: 200px;
  background: #ffff00;
  border-radius: 250px;
  float: left;
  /*默認(rèn)值*/
}
.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：

submit

方法三：嵌套（可多層嵌套）

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轉(zhuǎn)義后：

#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中：

    
div2
    
div3
    

        

            
lightcoral
        
    

方法三：作用域

less中：

 @len:30px;
  .font-size{
    @len:30px;//這個(gè)@len在里面聲明，優(yōu)先級(jí)更高
    font-size: @len;//50px
  }
  @len:12px;//這里@len重新聲明了，所以@len為12px;但是小于上面，font-size的優(yōu)先級(jí)
.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轉(zhuǎn)義后：

.font-size {
  font-size: 30px;
}
.font-size2 {
  font-size: 12px;
}

html中：

@len:30px;
@len:12px;

方法四：循環(huán)

less中：

.width(@frequency) when (@frequency>0){//@frequency是我們自己聲明的，當(dāng)我們聲明的這個(gè)大于0時(shí)往下執(zhí)行
  .width((@frequency - 1));//調(diào)用自己
  height: (10px * @frequency);//每次調(diào)用自己的時(shí)候執(zhí)行的操作
  border: 1px red solid;
}
.span{
  .width(5);調(diào)用方法；（5）執(zhí)行的次數(shù)
}

css轉(zhuǎn)義后：

.span {
  height: 10px;
  height: 20px;
  height: 30px;
  height: 40px;
  height: 50px;
  border: 1px red solid;
}

html中：

123
123
123
123
123

當(dāng)前題目：less的使用方法
網(wǎng)頁(yè)路徑：http://weahome.cn/article/dscdcjs.html