Less從入門到精通——合併屬性(附原始碼、學習視訊和筆記)
阿新 • • 發佈:2020-12-06
完整學習資源在這裡哦~
連結:https://pan.baidu.com/s/1cXs9KKoIFP1M5oTClSr7yg
提取碼: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; }