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