less的使用方法

一 、如何引路入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 class="f-sty">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 class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">
        <div class="div5">
            <div class="div6">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 class="font-size">@len:30px;</div>
<div class="font-size2">@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 class="span">123</div>
<div class="span">123</div>
<div class="span">123</div>
<div class="span">123</div>
<div class="span">123</div>