LESS 参数留空时报错: .text_element(left;;;20px;); 报错 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

LESS 参数留空时报错: .text_element(left;;;20px;); 报错

杨冬芳 2016-06-03 15:18:18 1653

最近在学习用LESS替代CSS,发现用了之后根本停不下来,简直方便的不要不要的,科技是第一生产力。

@color1:#ccc;
@color2:blue;
@color3:black;
.position_element(@positon:relative; @width:100%; @height:100%; @top:0; @left:0;){
    //元素位置大小确定;
    position: @positon;
    width: @width;
    height: @height;
    top: @top;
    left:@left;
}
.margin(@top:0;@right:0;@bottom:0;@left:0;){
    //元素外边距设置;
    margin: @top @right @bottom @left;
}
.padding(@top:0;@right:0;@bottom:0;@left:0;){
    //元素内填充设置;
    padding: @top @right @bottom @left;
}
.text_element(@position:center;@Lheight:200%;@color:#fff;@Fsize:16px;@Ffamily:"Comic Sans MS","幼圆","黑体",sans-serif;@Fwieght:normal;){
    //文本元素样式设置;
    text-align: @position;
    line-height: @Lheight;
    color: @color;
    font-size: @Fsize;
    font-family: @Ffamily;
    font-weight: @Fwieght;
}
.box-sizing(@border-box:border-box;){
    //盒子大小与边框、内填充的关系设置;
      box-sizing:@border-box;
      -webkit-box-sizing:@border-box;
      -moz-box-sizing:@border-box;
      -ms-box-sizing:@border-box;
      -o-box-sizing:@border-box;
}
.transition(@Attribute:all;@time:.6s;@delay:0;){
    //过度效果设置;
    -webkit-transition: @Attribute @time @delay;
      -moz-transition: @Attribute @time @delay;
      -o-transition: @Attribute @time @delay;
      transition: @Attribute @time @delay;
}
.tranlate(@X:0;@Y:0;@Z:0;){
    //偏移设置;
  -webkit-transform:translate3D(@X,@Y,@Z);
  -moz-transform:translate3D(@X,@Y,@Z);
  -o-transform:translate3D(@X,@Y,@Z);
  //IE兼容
  -ms-transform:translateY(@Y);
  -ms-transform:translateX(@X);
  transform:translate3D(@X,@Y,@Z);
}
ul{
    .position_element(absolute;300px;400px;50%;50%;);
    .margin(-150px; 0; 0;-200px;);
    .padding;
    // .text_element(left;;;20px;);
    li{
        list-style: none;
        a{
            display: block;
            color: @color2;
            font-family: "微软雅黑";
            font-size: 32px;
            text-decoration: none;
            &:hover{
                color:@color3; 
                font-weight: bold;
            }
        }

    } 
}

如上所示,我写了一些带默认值的函数,都是常用的。可以在元素内很方便的调用,例如ul元素下的

 .position_element(absolute;300px;400px;50%;50%;);
    .margin(-150px; 0; 0;-200px;);
    .padding;

但是.但是.但是(重说三),有一点很不方便的是,比如设置文字样式使用 .text_element(left;;;20px;); 会报错,我想修改文字对齐(第一项),文字大小(第四项),其余样式全部默认值。难道我必须写 .text_element(left;200%;#fff;16px;) ,字体之后的会采取默认值,但前面的行高和颜色就必须写上去,不能为空否则报错,这好不方便啊!!有用LESS的基佬教我一招么?

前端开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:26:42

    文档中就有啊

    Named Parameters
    A mixin reference can supply parameters values by their names instead of just positions. Any parameter can be referenced by its name and they do not have to be in any special order:
    
    .mixin(@color: black; @margin: 10px; @padding: 20px) {
      color: @color;
      margin: @margin;
      padding: @padding;
    }
    .class1 {
      .mixin(@margin: 20px; @color: #33acfe);
    }
    .class2 {
      .mixin(#efca44; @padding: 40px);
    }

    compiles into:

    .class1 {
      color: #33acfe;
      margin: 20px;
      padding: 20px;
    }
    .class2 {
      color: #efca44;
      margin: 10px;
      padding: 40px;
    }
    1 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程