less的实践笔记
less的实践笔记
前端届的科比 发表于2年前
less的实践笔记
  • 发表于 2年前
  • 阅读 43
  • 收藏 1
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

摘要: less的使用,less的学习,less的技巧

##less的使用示例

普通函数

参数前缀使用@

.icon(@width, @height) {
  display: block; 
  width: @width; 
  height: @height; 
}
.icon-1(@width, @height){
  display: block; 
  width: @width*1px; 
  height: @height*1px; 
}

a{.icon(400px,300px);}
span{.icon-1{400,300}}

带css-hack的写法 同函数名但不同签名的函数

// 兼容IE7+的input元素写法
@ie8-10-fix:~"\0";
@placeholderColor: #a8acb4;
.u-input(@height, @lineHeight, @paddingTop, @paddingBottom){
  height: 1px*@lineHeight;
  line-height: 1px*@lineHeight;
  padding-top:1px*@paddingTop;
  padding-bottom: 1px*@paddingBottom;
  height: @height*1px@ie8-10-fix;
  line-height:@height*1px@ie8-10-fix;
  padding-top: 0px@ie8-10-fix;
  padding-bottom: 0px@ie8-10-fix;
  *height: 1px*@height;
  *line-height: 1px*@height;
  *padding-top: 0;
  *padding-bottom: 0;
  &::-webkit-input-placeholder {color:@placeholderColor;}
  &:-moz-placeholder {color:@placeholderColor;}
  &::-moz-placeholder {color:@placeholderColor;}
  &:-ms-input-placeholder {color:@placeholderColor;}
}
.u-input(@height, @lineHeight, @paddingTop, @paddingBottom,@placeholderColor){
  height: 1px*@lineHeight;
  line-height: 1px*@lineHeight;
  padding-top:1px*@paddingTop;
  padding-bottom: 1px*@paddingBottom;
  height: @height*1px@ie8-10-fix;
  line-height:@height*1px@ie8-10-fix;
  padding-top: 0px@ie8-10-fix;
  padding-bottom: 0px@ie8-10-fix;
  *height: 1px*@height;
  *line-height: 1px*@height;
  *padding-top: 0;
  *padding-bottom: 0;
  &::-webkit-input-placeholder {color:@placeholderColor;}
  &:-moz-placeholder {color:@placeholderColor;}
  &::-moz-placeholder {color:@placeholderColor;}
  &:-ms-input-placeholder {color:@placeholderColor;}
}

@args的使用

.animation(@arg){
  -moz-animation:@arg;
  -webkit-animation:@arg;
  -o-animation:@arg;
  -ms-animation:@arg;
  animation:@arg;
}

&{}的使用 两个keyframes的对比

原始版:


.keyframes(@name) {
  @-webkit-keyframes @name {
    .-frames(-webkit-);
  }
  @-moz-keyframes @name {
    .-frames(-moz-);
  }
  @-o-keyframes @name {
    .-frames(-o-);
  }
  @-ms-keyframes @name {
    .-frames(-ms-);
  }
  @keyframes @name {
    .-frames();
  }
}

// 动画写法
&{
  .keyframes(bounce);
  .-frames(@-...){
    0% {@{-}transform:translate3d(0, 0,0);}
    25% {@{-}transform:translate3d(0,-5px,0);}
    50% {@{-}transform:translate3d(0,0,0);}
    75% {@{-}transform:translate3d(0,5px,0);}
    100% {@{-}transform:translate3d(0, 0,0);}
  }
}

//使用示例
.elem{.animation(bounce .8s infinite linear);}

优化版:

.keyframes(@name, @frames) {
  @-webkit-keyframes @name { @frames(); }
  @-moz-keyframes @name { @frames(); }
  @-ms-keyframes @name { @frames(); }
  @-o-keyframes @name { @frames(); }
  @keyframes @name { @frames(); }
}


/**
.keyframes(demo_keyframes, {
  100% {.transform(rotate(360-43deg));}
});

.element{.animation(demo_keyframes .3s linear);}
*/
标签: less css sass
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 21
博文 64
码字总数 51572
×
前端届的科比
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: