less基本使用

• less可以定义一些常量, 可以让css处理方法, 进行选择器嵌套.
• 浏览器是不识别less的,只识别css
• 使用less时,要编译成css,才能运行
• 使用软件kola,将less转换成css.

less用法

1.定义常量： @常量名称：值

<div class="box">sk666</div>
<div class="box2">aaaa</div>

.red{
  color:red;
  border: 4px solid orange;
}
.blue{
  color:blue;
}

//1.常量
@width:200px;

.box{
  width: @width;
  height: @width;
  background: #000;
  .red;//设置文字颜色红色

}

2.定义方法

• 2.1 上面定义方法加括号,下面必须加括号调用

.bd(){

}

.box2{
  .box;
  .bd();
}

• 2.2 方法传参, 参数个数和类型要匹配
• @color, @color2方法形参

.color(@color, @color2){
  color:@color;
  border: 6px solid @color2;
}

.box{
  width: @width;
  height: @width;
  background: #000;
  .red;//设置文字颜色红色
  .color(red, yellow);

}

• 2.3 根据传入参数, 调用不同方法, 并且可以给形参添加默认值

.color(r, @color:orange, @color2:purple){
  color:@color;
  border-right: 6px solid @color2;
}

.color(l, @color:red, @color2:blue){
  color:@color;
  border-left: 6px solid @color2;
}

.box{
  width: @width;
  height: @width;
  background: #000;
  .red;//设置文字颜色红色

  .color(l);
}

3.嵌套使用

.box2{
  .box;

    ul{
      li{
        &:hover{//&: 上一级标签
          color:#fff;
        }
      }
    }

}