最近在学习用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的基佬教我一招么?
文档中就有啊
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;
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。