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

柔光的暖阳◎ 2021-09-17 08:04 591阅读 0赞

**安装**：

cnpm install less less-loader --save

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

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

**使用：**

在vue文件里面新建：

注意：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>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/ae6ec4f37f4e4535bc77141675bf28df.png