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

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

应用步骤

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，能够让我的项目更容易保护