less基本使用

• less可以定義一些常量, 可以讓css處理方法, 進(jìn)行選擇器嵌套.
• 瀏覽器是不識(shí)別less的,只識(shí)別css
• 使用less時(shí),要編譯成css,才能運(yùn)行
• 使用軟件kola,將less轉(zhuǎn)換成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;//設(shè)置文字顏色紅色

}

2.定義方法

• 2.1 上面定義方法加括號(hào),下面必須加括號(hào)調(diào)用

.bd(){

}

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

• 2.2 方法傳參, 參數(shù)個(gè)數(shù)和類型要匹配
• @color, @color2方法形參

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

.box{
  width: @width;
  height: @width;
  background: #000;
  .red;//設(shè)置文字顏色紅色
  .color(red, yellow);

}

• 2.3 根據(jù)傳入?yún)?shù), 調(diào)用不同方法, 并且可以給形參添加默認(rèn)值

.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;//設(shè)置文字顏色紅色

  .color(l);
}

3.嵌套使用

.box2{
  .box;

    ul{
      li{
        &:hover{//&: 上一級(jí)標(biāo)簽
          color:#fff;
        }
      }
    }

}