开发者社区> 问答> 正文

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

最近在学习用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的基佬教我一招么?

展开
收起
杨冬芳 2016-06-03 15:18:18 2561 0
1 条回答
写回答
取消 提交回答
  • IT从业

    文档中就有啊

    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;
    }
    2019-07-17 19:26:42
    赞同 1 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
Transforming the data center 立即下载
Top 5 mistakes when wriiting a 立即下载
低代码开发师(初级)实战教程 立即下载