less混合

Posted wzndkj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了less混合相关的知识,希望对你有一定的参考价值。

混合(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混合的主要内容,如果未能解决你的问题,请参考以下文章

Less预处理——混合方法

我的less学习之路

less混合

less中的继承与混合

less学习---less的混合(mixin)

less