Less学习笔记 -- Mixins(混合)二

发布时间:2020-08-10 18:26:17 作者:frwupeng517
来源:网络 阅读:331

高级参数和@reset变量

如果你希望你的mixin接受数量不定的参数,你可以使用“...”。在变量名后面使用它,它会将这些参数分配给变量

.mixin(...){/*接受0到N个参数*/}
.mixin(){/*不接受任何参数*/}
.mixin(@a:1){/*接受0到1个参数*/}
.mixin(@a:1;...){/*接受0到N个参数*/}
.mixin(@a;...){/*接受1到N个参数*/}

.mixin(...){ } 接受0到N个参数

Less:

.mixin1(...){
  padding:@arguments;
}
div{
  .mixin1(10px);
  div{
    .mixin1(20px 30px);
    div{
      .mixin1(40px 50px 60px);
      div{
        .mixin1(70px 80px 90px 100px)
      }
    }
  }
}


CSS:

div {
  padding: 10px;
}
div div {
  padding: 20px 30px;
}
div div div {
  padding: 40px 50px 60px;
}
div div div div {
  padding: 70px 80px 90px 100px;
}


.mixin(){ } 不接受任何参数 (这个其实就相当于不输出混合集)

Less:

.mixin2(){
  width:200px;
}
p{
  .mixin2;
}


CSS:

p {
  width: 200px;
}



.mixin(@a:1){ } 接受0到1个参数

Less:

.mixin3(@red1:#e4393c){
  color:@red1;
}
span{
  .mixin3;
}


CSS:

span {
  color: #e4393c;
}



.mixin(@a:1;...){ } 接受0到N个参数

Less:

.mixin4(@a:10px, ...){
  padding:@arguments;
}
div{
  .mixin4;
  p{
    .mixin4(2px,5px,2px 5px);
  }
}


CSS:

div {
  padding: 10px;
}
div p {
  padding: 2px 5px 2px 5px;
}



.mixin(@a;...){ } 接受1到N个参数

Less:

.mixin5(@a, ...){
  padding:@arguments;
}
ul{
  .mixin5(5px);
  li{
    .mixin5(2px 4px);
  }
}


CSS:

ul {
  padding: 5px;
}
ul li {
  padding: 2px 4px;
}















推荐阅读:
  1. LESS 与 SASS
  2. Sass学习笔记 -- 混合器

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

less 混合 mixins

上一篇:MySQL8.0.16账户双密码实验一例

下一篇:MariaDB 10.1源码安装流程(CentOS 6.5)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》