less可以做什么？less詳解！(less嵌套選擇器實現純CSS二級導航)

前端技術眾多，作為一名前端工程師，我們每接觸新技術首先要懂得此技術的優勢和劣勢，這是最基本的。往深入了說還需要懂得技術的應用場景，與之配合的技術等，方便為以后架構做准備。而less作為一門CSS預處理語言，擁有函數式變成的特點，主要優點就是高效。主要適用於包含眾多CSS的大型項目。主要體現在：項目公共樣式的定義，如頁面主色、固定數值（寬、高、時間等）、公用樣式模板、封裝省略瀏覽器兼容前綴的函數等。

1.less的兩種使用方式

1.1 直接調用需要引入less.js，和less樣式文件，需要注意的是rel需要指定為stylesheet\less。此方式也是在瀏覽器內部最終將less中的樣式轉換成css樣式之后調用。因頁面加載時資源請求較多，故不推薦此方法。

<link rel="stylesheet/less" href="./lessTest.less"/>
<script src="./less.js"></script>

1.2 將less文件編譯為css文件后引入，博主使用的是考拉工具，大家可以自行百度。

less語法（本文為了方便將直接使用引入lessTest.less文件的方式，實際開發中建議使用第二種方式）

2. 定義變量 @變量名:變量值;

///定義顏色變量
@pe_color:#204d90;

.div1{
  width: 100px;
  height: 100px;
  background: @pe_color;
}

//定義字符串變量
@baseUrl:"./img/";
.div1{
  width: 1000px;
  height: 1000px;
  background-image: url("@{baseUrl}/bannerNBA.jpg");
}

變量計算

*數值計算

@width:1000px;

.div1{
  width: @width;
  height: @width/2;
  margin-top: @width*pi();    //pi()為less函數，詳細請查看API
  border: 1px solid #000;
}

*顏色計算

@baseColor: #6dffa7;
@bdColor:spin(@baseColor,180);
.div1{
  width: 1000px;
  height: 1000px;
  border: 10px solid @bdColor;            //調色盤顏色數值旋轉180度，也就是圓心對稱點
  background: darken(@baseColor,50%);     //變暗50%
  color:lighten(@baseColor,40%)       //變亮40%
}

3. Mixin混合模板   定義模板: .模板名(參數){}

.myborder(@bdwidth,@bdstyle,@bdcolor){
  border: @bdwidth @bdstyle @bdcolor;
}
.div1{
  width: 1000px;
  height: 1000px;
  .myborder(5px,dashed,#666666)
}

*定義默認值

.myborder(@bdwidth:10px,@bdstyle:solid,@bdcolor:#86ffff){
  border: @bdwidth @bdstyle @bdcolor;
}
.div1{
  width: 1000px;
  height: 1000px;
  .myborder()
}

.myborder(@bdwidth:10px,@bdstyle:solid,@bdcolor:#86ffff){
  border: @bdwidth @bdstyle @bdcolor;
}
.div1{
  width: 1000px;
  height: 1000px;
  .myborder(20px)
}

*選擇性調用

/*寫兼容模板*/
.myTransition(){
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
/*模板A-1*/
.myLinearBackground(style1,@color1,@color2){
  background-image:-webkit-linear-gradient(top,@color1,@color2);
  background-image:-moz-linear-gradient(top,@color1,@color2);
  background-image:-ms-linear-gradient(top,@color1,@color2);
  background-image:-o-linear-gradient(top,@color1,@color2);
  opacity:.3;
}
/*模板A-2*/
.myLinearBackground(style2,@color1,@color2){
  background-image:-webkit-linear-gradient(bottom,@color1,@color2);
  background-image:-moz-linear-gradient(bottom,@color1,@color2);
  background-image:-ms-linear-gradient(bottom,@color1,@color2);
  background-image:-o-linear-gradient(bottom,@color1,@color2);
  opacity:.7;
}
.myLinearBackground(@_,@_,@_){    //@_的數量要與兩個樣式模板參數數量相同
  .myTransition();              //@_為通配符，此模板意味只要調用.myLinearBackground()，內部樣式無論何時都會調用
}
.div1{
  width: 1000px;
  height: 1000px;
  .myLinearBackground(style1,#86ffff,#ff3e54);
}
.div1:hover{
  .myLinearBackground(style2,#ff3e54,#86ffff)
}

3. 嵌套選擇器

用嵌套選擇器完成一個純CSS導航：

DOM結構如下：

    <ul class="box">
        <li>菜單1</li>
        <li>菜單2
            <ul>
                <li>子菜單1</li>
                <li>子菜單2</li>
                <li>子菜單3</li>
                <li>子菜單4</li>
            </ul>
        </li>
        <li>菜單3</li>
        <li>菜單4</li>
    </ul>

CSS如下：

@bgcolor:#86ffff;
@bdcolor:#ffe91e;
@itemwidth:100px;
@itemheight:50px;
.itemBorder(@bdwidth:2px,@bdstyle:solid,@bdcolor:@bdcolor){
  border: @bdwidth @bdstyle @bdcolor;
}
*{
  margin: 0;
  padding: 0;
}
.box{    
  width: 420px;
  height: 50px;
  list-style: none;
  li{                                             //相當於ul li
    width: @itemwidth;
    height: @itemheight;
    list-style: none;
    line-height: 50px;
    text-align: center;
    background: @bgcolor;
    .itemBorder();
    &:hover{                                      //相當於ul li:hover
      .itemBorder(2px,solid,#ff3516)
    }
  }
  >li{                                           // 相當於ul>li
    overflow: hidden;
    float: left;
    &:hover{                                      // 相當於ul>li:hover
      overflow: visible;
      cursor: pointer;
    }
  }
}

 喜歡請點擊右下角推薦，如有疑問可以留言。轉載請標明出處。