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

2次阅读

共计 902 个字符，预计需要花费 3 分钟才能阅读完成。

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

/* 第一步，在我的项目的 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;
}

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

正文完