安装

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>

效果图:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐