Less从入门到精通——合并属性(附源码、学习视频和笔记)

完整学习视频及资料在这里哦~
链接:https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw
提取码:4k8t

合并属性

逗号分割合并的属性( + )

       在需要合并的属性的 “ : ” 前面加上 “ + ” 就可以完成合并,合并以“ ,” 分割属性。

.mixin(){
    // name 为 in 的动画
    animation+: in 3s;
}
div{
    .mixin();
    // name 为 out 的动画
    animation+: out 3s;
}
// 输出
div {
  animation: in 3s, out 3s;
}

空格分割合并的属性( +_ )

       在需要合并的属性的 “ : ” 前面加上 “ +_ ” 就可以完成合并,合并以“ ,” 分割属性。

.mixin(){
    border+_:1px solid;
}
div{
    .mixin();
    border+_: steelblue;
}
// 输出为
div {
  border: 1px solid steelblue;
} 

       ==注意:==如果有的是 + ,有的是 +_ ,则哪一种是最新的方式就是哪个的就用那种形式分割。

.mixin(){
    border+_:1px solid;
}
div{
    .mixin();
    border+: steelblue;  //  + 以逗号分割
}
// 输出为
div {
  border: 1px solid, steelblue;
}

// 将div中改为
div{
    border+: steelblue;
    .mixin();		//  +_ 以空格
}
// 则输出为
div {
  border: steelblue 1px solid;
}
上一篇:Vue.set、Vue.mixin


下一篇:CSS预处理 Less和Sass总结