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

標籤：border   大型   圓心   轉換   hover   logs   order   log   oat   

前端技術眾多，作為一名前端工程師，我們每接觸新技術首先要懂得此技術的優勢和劣勢，這是最基本的。往深入了說還需要懂得技術的應用情境，與之配合的技術等，方便為以後架構做準備。而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;    }  }}

 

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