Less进阶之二

接着上一次的混入学习，这次开始学习Less中的嵌套

嵌套

CSS的模块化，在模块中常用嵌套语法

/*Less中的嵌套语法*/
.wjs_app{
   display:block;
   img{
     display:none;
   }
/*需要链接的情况：要用到&*/
   &hover{
      img{
          display:block;
          position:absolute;
          left:50%;
          margin-left:-60px;
          border:solid 1px #ccc;
          border-top:none;
          top:40px;
          z-index:10000;
       }
   }
   > div{
     display:block;
   }
}

/*当less编译成CSS后，等价于下面的CSS语法*/
.wjs_app{
    display:block;
}
.wjs_app img{
    display:none;
}
.wjs_app:hover img{
   display:block;
   position:absolute;
   left:50%;
   margin-left:-60px;
   border:solid 1px #ccc;
   border-top:none;
   top:40px;
   z-index:10000;
}
.wjs_app > div{
   display:block;
}

导入-Import

标题

/*声明字符集*/
@chartset="UTF-8";
/*常见的导入LESS模块语法*/
/*导入左侧图片中LESS模块*/
@import "topBar"

@import "banner";

@import "mixins";

函数-内置函数 运算

/*运算*/
/*假设ul元素中有5张图片*/
@num=5;
ul{
  width:100%*@num;
  li{
   width:100%/@num;
   color:red+green+blue;
   background:gray*0.3;
   /*内置函数,比给定的颜色暗20%*/
   border-color:lighten(red,20%);
   border-color:darken(red,20%);
  }
}

   /*编译完成后，生成的CSS语句是*/
ul{
  width:500%;

}
ul li{
   width:20%;
   color:#ffffff;
   background:#262626;
   /*内置函数,比给定的颜色暗20%*/
   border-color:#990000;
  }
}

Good Job！！！,到这关于Less语法的基本学习就告一段落了，尽管看着Less语法还不是很顺眼，但我相信这是一个不断熟悉的过程，多用Less，多总结经验，逐渐就会熟练Less的写法的，欢迎各位学习Less的小伙伴批评指正！