less

配置流程

1.npm i less --save-dev 把less源码安装到开发环境
 /* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */
2.npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）

3.lessc -v 查看版本 如果版本号显示不出来 npm i less -g 全局安装一下less

4.在main.js  import less from 'less'  Vue.use(less)  作用：在所有页面都可以使用less预编译css语言

5.独立的vue文件需要引入less <style lang="less"></style>

less的使用

div{
   width:@width
   //字符串变量拼接时  "@{}+字符串"
   background: url("@{imgurl}logo.png") no-repeat;
   }

less的特征

1. less通过类似键值对定义属性

@color:red  ;
@imgurl:"../assets/";
@px:100px;

2. less函数

.function(@color:blue,@fontsize:18px){
  color: @color;
  font-size: @fontsize;
}
h2{
  .function()
}

3. less可嵌套+可计算

.div2{
  width: @px*2;
  height: @px*2;
  background: ivory;
  .div2son{
    width: @px*1;
    height:@px*1;
    background: bisque;
  }
  .div2sun{
    width: @px - 50px;
    height:@px - 50px;
    background: palevioletred;
  }
}

4. less导入 ........ less不仅可以在所需页面导入，不同的less文件也可互相导入

........ css文件也可以通过此方法导入

<style scoped lang="less">
    @import url(../lesspage/less.less);
</style>