首页 > 代码库 > Less-minxin传参
Less-minxin传参
//mixin传参 --简单传参,example: .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .callUse{ .border-radius(5px); } --带默认值传参,参数为可选,example: .border-radius(@radius:5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .callUse{ .border-radius; } //output css .callUse { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } --多参调用,example: .test(@height,@width,@border,@color){ height:@height; width:@width; border:@border; color:@color; } .study{ .test(100px,500px,2px,red); } //output css .study { height: 100px; width: 500px; border: 2px; color: red; } --混合多参,example: .test(@width){//一参可调用 width:@width; } .test(@width,@padding:2px){//一参可调用,一参可选 min-width:@width; padding:@padding; } .test(@width,@padding,@margin:2px){//两参可调用,一参可选 max-width:@width; padding:@padding; margin:@margin; } //一参调用 .study{ .test(500px) } //output css .study { width: 500px; min-width: 500px; padding: 2px; } //两参调用 .study{ .test(500px,5px); } //output css .study { min-width: 500px; max-width: 500px; padding: 5px; margin: 2px; } //命名参数调用 .study{ .test(@width:500px); } 编译结果与一参调用时是一样的 .study{ .test(@width:500px,@padding:5px); } 编译结果与两参调用时是一样的 --@arguments多参同时调用 .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .test { .box-shadow(2px; 5px); } //output css .test { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000; } 小结:未声明参数(没有默认值的参数)与未声明参数之间用“ ,”分隔 已声明参数(有默认值的参数)与已声明参数之间用“ ;”分隔 (这里对@rest不是很理解)
作者:leona
原文链接:http://www.cnblogs.com/leona-d/p/6296828.html
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
Less-minxin传参
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。