一、前言

用过 less 的都知道 less 有多香，反正我是挺喜欢，你可能不知道 less 还可以像函数一样调用？

二、初探 less 样式的调用（普通调用）

1、我们在 less 文件上设置公共样式 .common ，在 li 下面直接调用 .common

/* ◆ less 文件 */
// 公共样式
.common {
    width: 200px;
    height: 40px;
    line-height: 40px;
 }
// ul li 的样式
ul{
    li {
        list-style: none;
        .common;
    }  
} 

2、会发现，在自动生成的 css 文件下，li 身上多了 .common 的样式

/* ◆ less 文件 */
.common {
  width: 200px;
  height: 40px;
  line-height: 40px;
}
ul li {
  list-style: none;
  width: 200px;
  height: 40px;
  line-height: 40px;
}

3、直接看图，可以会更明显

三、了解 less 样式调用（无参调用）

1、下面，我们给公共样式 .common 带上小括号，同时在 li 下面调用

/* ◆ less 文件 */
// 公共样式
.common() {
    width: 200px;
    height: 40px;
    line-height: 40px;
 }
// ul li 的样式
ul{
    li {
        list-style: none;
        // .common();这里带不带括号都可以调用
        .common;
    }  
}   

2、见证奇迹啦，只有 li 调用了 .common 才生成样式，与函数调用有异曲同工之妙啊

/* ◆ less 文件 */
ul li {
  list-style: none;
  width: 200px;
  height: 40px;
  line-height: 40px;
}

3、直接看图吧，有图有真相

四、深入 less 样式调用（有参调用）

1、既然 less 的样可以像函数一样调用，那当然也可以传参啦，我们试试!

/* ◆ less 文件 */
// 公共样式
.common(@bgc, @fz) {// 这里定义，放形参
    width: 200px;
    height: 40px;
    line-height: 40px;
    background-color: @bgc;
    font-size:  @fz;
 }
// ul li 的样式
ul{
    li {
        list-style: none;
        .common(red,20px);// 这里调用，放实参
    }  
}  

2、显而易见，我们成功啦！

/* ◆ less 文件 */
ul li {
  list-style: none;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background-color: red;
  font-size: 20px;
}

3、直接看图吧，反正我是爱了，绝！