Less-混合

2021-10-30 23:00:09 阅读：174 来源： 互联网

标签：box Less 100px height width 混合 border 200px

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

混合其实就是设置功能属性，把可复用的提取出来

第一种混合的使用方法

index.html

<div class="box"></div>
<div class="box2"></div>

index.less

.bordered {
  border: 1px solid #ccc;
}

.box{
  width: 200px;
  height: 200px;
  .bordered()
}

.box2{
  width: 100px;
  height: 100px;
  margin-top: 10px;
  .bordered()
}

混合可以使用选择器进行选择

index.html

 <div class="box">
    <div class="border"></div>
   </div>
   <div class="box2"></div>

index.less

.box{
  width: 200px;
  height: 200px;
  border: 1px solid #333;
  padding: 10px;
  .border {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
  }
}

.box2{
  margin-top: 10px;
  .box .border()
}

.border类在.box中，如果.box2需要使用，此时就需要使用css的后代选择器进行选择；.box .bordered()就相当于选到了.box内部的.bordered

后代选择器也可以这样写

.box .border() 
等价于
.box>.border()

混合第二种写法

index.html

<div class="box">
   </div>
   <div class="box2"></div>

index.less

.border() {
  width: 100px;
  height: 100px;
  border: 1px solid #eee;
}

.box {
.border;
}

.box2 {
.border;
}

.border()代表的就是定义一个函数，这种写法的最大好处就是谁调用，给谁添加代码，不会增加全局代码

混合的属性或者函数可以加!important关键字的

.bordered() {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

.box {
.bordered!important;
}

混合也可以携带参数

.border(@width,@style,@color) {
  border: @width @style @color;
}

.box{
  width: 100px;
  height: 100px;
  .border(1px; solid; #ccc)
}

函数内部也有默认参数

.border(@width,@style,@color:orange) {
  border: @width @style @color;
}

.box{
  width: 200px;
  height: 200px;
  .border(1px; solid;)
}

函数内部的参数也是可以不按照顺序传的

.border(@width,@style,@color) {
  border: @width @style @color;
}

.box{
  width: 200px;
  height: 200px;
  .border(@color: #ccc; @width: 1px; @style: solid)
}

.box内部调用.bordered时候是可以不按照顺序传递的，此时前面一定要加上赋值属性名

函数内部可以设定返回值

.mixin() {
  @bgc: skyblue;
}

.box {
  .mixin();
  width: 100px;
  height: 100px;
  background-color: @bgc;
}

.mixin函数必须要先调用一次，.mixin函数就会释放内部的变量；然后再使用返回的变量，这样做的好处就是随拿随用，不会造成全局浪费；less在编译的时候，会自动处理，看代码中有没有用到，也可以减少全局污染；

函数内部的变量也可以进行传参和计算

.mixin(@width,@height) {
  @padding: ((@width + @height) * 2)
}

.box {
  .mixin(10px, 20px);
  width: 200px;
  height: 200px;
  padding-left: @padding;
  background-color: red;
}

函数还可以进行嵌套

.outerMixin(@value) {
  .innerMixin() {
    background-color: @value;
  }
}

.box {
  width: 200px;
  height: 200px;
  .outerMixin(red);
  .innerMixin()
}

标签：box,Less,100px,height,width,混合,border,200px
来源： https://www.cnblogs.com/keyeking/p/15487821.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Less-混合