lesss問答-變量和&的使用

1. less裏mixin如何使用？

   就像寫js的方法同樣。定義多個mixin組，而後進行混合。

   .bg-color{
     background: #eec7c7;
   }
   .font-size{
     font-size: 20px;
   }
   .width-height(@h: 200px, @w: 300px){
     width: @w;
     height: @h;
   }
   // 混合
   .mix-box{
     .bg-color;
     .font-size;
     .width-height(100px)
   }

2. less中變量怎麼用？

   經常使用的有變量值、變量名、選擇器。

   變量值：在less文件的最上面，用 @標籤，定義變量，css代碼裏直接用

   @myColor: #1b3b2a; // 注意：定義變量時，分號不要掉
   .box{
     color: @myColor;
   }

   變量名：在less文件的最上面，用 @標籤，定義變量名

   @fontProperty: color;
   .line1{
       background-@{fontProperty}: #94cbdb;
     }

   變量名：在less文件的最上面，用 @標籤，定義標籤名

   @selector: h1;
   @{selector}{
       background-color: #b997ab;
     }

3. &運算符怎麼用？

   表示父選擇器。用在 類的選擇，僞類，僞元素和兄弟選擇器

   //最經常使用的兩種狀況 .class1.class2 和 .class1 .class2
   // 等價於選擇.box.mix-box
   .box{
     &.mix-box{
       color: red;
     }
   }
   //等價於選擇.box .content
   .box{
     & .content{
       color: #18e645;
     }
   }

   // 僞類選擇器，給 box 的的a標籤加 a:hover 加樣式
   .box{
     a{
       &:hover{
         background: #6d8f10;
       }
     }
   }

   // 僞元素: 給line3類加上before僞元素，設定僞元素的content和color
     .line3{
       &::before{
         content: "我是line3的before";
         color: #b94b4b;
       }
     }

   // 兄弟選擇器： 給box後面的全部div標籤，加上background-color樣式
   .box{
     &+div{
       background-color: #aaaaf5;
     }
     &~p{
       color: #d3e71d;
     }
   }

   以上四個例子可知 &有如下特色：

   • 花括號限定了括號內的css選擇器的範圍
   • &在選擇器中起到的做用就是父選擇器。