css的预处理器less的混合函数的用法

Posted 2021-09-14 水冗水孚

本文只说用法步骤，不说基本概念。

使用步骤

less文件

/* 第一步，在项目的assets文件夹下新建这个css.less文件,
   里面放置我们需要使用的混合less，可以有多个。
   比如这里我们放置两个less混合函数，用谁指定谁即可
*/ 

// 第二步，使用变量指定默认值
.content(@width:480px,@height:360px,@background:#bfa){
    width: @width;
    height: @height;
    background-color: @background;
}

.content2(@width:50px,@height:50px,@background:pink){
    width: @width;
    height: @height;
    background-color: @background;
}

---

vue文件

<template>
  <div class="box">
    <div class="content"></div>
  </div>
</template>

<script>
export default {
  name: "lessDemo",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// 第三步，引入这个less文件，并准备使用
@import "@/assets/css.less";
.box {
  width: 100%;
  height: 100%;
  .content {
    // 第四步（1）  不传参使用默认less的混合函数
    // .content();

    // 第四步（2）  传参就使用我们传过去的
    // .content(600px,200px,#baf);

    // 第四步（3）  可以根据名字指定使用对应的那个less混合函数
    .content2()
  }
}
</style>

less的混合函数的思想其实就是高内聚、低耦合的思想，只不过是css层面的，把公共的、类似的css提取出来，单独存放。哪里需要就在哪里引入，若使用的地方略有不同，可以通过传参的方式进行改变控制。和html的组件化拆分、js的模块化、函数式编程类似。灵活使用项目的less，可以让项目更容易维护

vue中也有混合mixin，思想也是用来实现代码功能的复用的。后续会再写一篇关于vue混合的使用方法