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;
    }
  }
}

 喜欢请点击右下角推荐，如有疑问可以留言。转载请标明出处。