less使用总结

less语法

less的基础语法常用到的主要有：变量、混合(Mixins)、嵌套规则；

1.变量

和JS中的变量一样，只是LESS的变量定义不是使用VAR而是使用@，通常可以用来存储公用的图片路径，选择器等
例:

  @box:.h1
  @{bgImg}:"../../images/test/"
  @box{
  background:url("@{bgImg}/h1.png")
  }
  

2.混合(Mixins)

①基本使用

可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。

  //->LESS代码
    .public() {//->在选择器后面加上()就可以不编译这个样式了
        width: 100px;
        height: 100px;
    }
    nav ul {
        .public;//如果public有子孙元素的样式，同样也会被复制过来
        list-style: none;
    }
    //->编译为CSS的结果
    nav ul {
        width: 100px;
        height: 100px;
        list-style: none;
    }

如果编译结果不想输出.box1，less代码中可写为.box1()

②extend

①这样子做会产生冗余CSS代码，我们可以extend来实现继承；

    //->LESS代码
    .public {
        width: 100px;
        height: 100px;
    }
    nav ul {
        &:extend(.public);
        list-style: none;
    }
    //->编译为CSS的结果
    .public, nav ul {
        width: 100px;
        height: 100px;
    }
    nav ul {
        list-style: none;
    }

3.嵌套规则

我们可以使用选择器嵌套来实现继承
例

//->LESS代码
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}
//->编译为CSS的结果
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

cli构建的vue中使用less

第一步：npm install less less-loader --save-dev （保存在开发环境就可以）
第二步：在.vue文件中的style中声明lang="less"。