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选择器的范围
   • &在选择器中起到的作用就是父选择器。