在vue中应用less, less常用语法

安装：

cnpm install less less-loader --save

配置loader:
找到配置文件：build/webpack.base.conf.js
在rules里加一条：

      {
        test: /\.less$/,  
        loader: "style-loader!css-loader!less-loader",     
      },

使用：

在vue文件里面新建：

<style lang="less" scoped>
</style>

注意：lang一定要为less,scpoed是作用域，一般都用；接下里就可以在stylel里面使用less语法了；

less常用语法浅析：

1，变量：
用@开头可定义一个变量，规则对照js变量，常用来放通用颜色，主题等等

@border:1px solid #ccc;
@bottom:20px;

2，函数：
.foo(){}，即可声明一个函数，返回一段css样式；
常用来做一个css功能；比喻省略号等等
用法：执行函数即可

.div{
.foo()
}

3,嵌套：
这是less最方便的一点用法，可多存嵌套

.box3 {
  div {
    background: red;
  }
  }

4，less文件的引用：
@import + 文件路径

@import "./../assets/test.less";

5,&符号
代表他的父元素，常与伪元素一起用

使用实例：

test.less

@border:1px solid #ccc;
@bottom:20px;
.ellipsis(){
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.ellipsis_clamp2() {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

test.vue

/* eslint-disable */
<template>
  <div>
    <div class="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse vitae aliquam nihil nemo! Fugit harum, nisi provident temporibus, saepe, assumenda sequi esse ut reprehenderit sit repellendus at? Excepturi, aspernatur sed.
    </div>
    <div class="box1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse vitae aliquam nihil nemo! Fugit harum, nisi provident temporibus, saepe, assumenda sequi esse ut reprehenderit sit repellendus at? Excepturi, aspernatur sed.
    </div>
    <div class="box3">
      <div>hhahah</div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    test () {
    }
  }
}
</script>
<style lang="less" scoped>
@import "./../assets/test.less";

.box {
  width: 300px;
  border: @border;
  margin-bottom: @bottom;
  .ellipsis();
}
.box1 {
  width: 300px;
  border: @border;
  .ellipsis_clamp2();
}
.box3 {
  div {
    background: red;
  }
  &:after {
    content: "after添加";
    color: blue;
  }
}
</style>

效果图：