Less預編譯混合寫法

項目一直用的是less預編譯,這是官網,但是今天想把好幾段樣式整合一下,回顧了一下他的混合用法:

//  公共段
.base (@h: 30px){      // 可以定義多個參數
    height: @h;
    line-height: @h;
    text-align: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: linear-gradient(to bottom,#999 0,#fff 50%,#999 100%,);
}


// 使用
.title{
 	.base(40px);   //  傳參
     width: 99.4%;
 }
 .week{
     display: flex;
     flex-wrap: nowrap;
     font-size: 14px;
     &>p{
         width: 14.2%;
         .base();        //  不傳參
     }
 }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章