首页 > 其他 > 详细

less混合

时间:2018-07-15 10:05:34      阅读:225      评论:0      收藏:0      [点我收藏+]
混合(mixin)变量
.border{
  border: 5px solid pink;
}
.box{
  width: 300px;height:300px;
  .border;
}
=>
.border {
  border: 5px solid pink;
}
.box {
  width: 300px;
  height: 300px;
  border: 5px solid pink;
}
这个就叫做混合,在box里面有一段跟border的样式,把border直接拿过来就可以

 

比如一个场景,两个div很像,只有唯一一行的样式的不一样的情况
.box{
  width: 300px;
  height:300px;
  border:1px solid #abcdef;
}
.box2{
  .box;
  margin-left: 100px;
}
=>
.box {
  width: 300px;
  height: 300px;
  border: 1px solid #abcdef;
}
.box2 {
  width: 300px;
  height: 300px;
  border: 1px solid #abcdef;
  margin-left: 100px;
}

像这种重用的样式,直接拿过来



可带参数带混合
.border(@border_width){
  border:@border_width solid pink;
}
.test_2{
  .border(30px)
}
=>
.test_2 {
  border: 30px solid #ffc0cb;
}

 

 

可带参数时的默认值
.border(@border_width:10px){
  border:@border_width solid pink;
}
.test{
  .border()
}
.test2{
  .border(20px)
}
=>
.test {
  border: 10px solid #ffc0cb;
}
.test2 {
  border: 20px solid #ffc0cb;
}
没默认值是不带值会报错



这个有什么好处,比如做一些兼容的时候
.border_radius(@rds:5px){
  -webkit-border-radius:@rds;
  -moz-border-radius:@rds;
  border-radius: @rds;
}
.radius_test{
  width: 100px;
  height: 40px;
  background-color:pink;
  .border_radius();
}
=>
.radius_test {
  width: 100px;
  height: 40px;
  -color: pink;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

 

less混合

原文:https://www.cnblogs.com/wzndkj/p/9311806.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!