less（六）混合的使用

cvper

于 2018-04-21 12:42:38 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

分类专栏： less 文章标签： less 混合

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80028181

less 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了LESS预处理器中混合(Mixin)的基本用法，包括如何定义带参数的混合、设置默认参数值以及在实际样式中调用混合的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接看下面的代码：混合就相当于一个函数，我们可以使用不同的参数来反复使用这个函数；

上面的代码首先定义了一个函数，有两个参数，那么函数内部，我们的border参数的设置就使用了这些参数；

定义完之后，我们在div内部的p标签上使用了这个函数；和使用 js 函数是差不多的；

上面只是定义了参数，参数还可以指定默认值的，我们改变一下：

   @width: 
  100; 
 
   @height: 
  100; 
 
   @pw: 
  0.5; 
 
   @ph: 
  0.5; 
 
  .border(@b-width: 
  5 
  px,@b-color: 
  orange){ 
 
  border:@b-width 
  solid @b-color; 
 
   } 
 
  div{ 
 
  width: 
  unit(@width,px); 
 
  height: 
  unit(@height,px); 
 
  border: 
  1 
  px 
  solid 
  red; 
 
  p{ 
 
  width: 
  percentage(@pw); 
 
  height: 
  percentage(@ph); 
 
  .border() 
 
   } 
 
   }