Less從入門到精通——合併屬性(附源碼、學習視頻和筆記)

完整學習資源在這裏哦~
連接: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;
}

空格分割合併的屬性( +_ )

在須要合併的屬性的 「 : 」 前面加上 「 +_ 」 就能夠完成合並,合併以「 ,」 分割屬性。code

.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;
}
相關文章
相關標籤/搜索