有幾天沒更新我的漫島系列了哈，設定十一月底完成漫島的第一版，時間挺緊迫的，另外，大家能看到的漫島的部分頁面，就截止到個人中心了，其餘的先不給看了。

由於知識雜又多，記不過來，像less稍微複雜一點的語法，每次我還得查一查文件，所以把平時遇到的比較不常規的用法記錄下來，隨時查閱。

言歸正傳：

Less的迴圈

實現功能：一個迴圈搞定多個div的背景圖片。
說明：希望你能領會何時用迴圈以及如何使用，不必拘泥於我的例子。
實現效果如下：

程式碼如下：

<!-- html 節點-->
<div class="dashboard">
    <div
 
 class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

//less迴圈語法
.dashboard {
    width:800px;
    margin:0 auto;
    display: flex;
    justify-content: space-around;
    .panel {
        width
 
: 220px;
        height: 100px;
        border: 1px solid #f00;
        background-position: left top;
        background-repeat: no-repeat;
    }
}
//迴圈用法如下：
.loop(@counter) when (@counter<=4) {
    .loop(@counter+1);
    .panel:nth-of-type(@{counter}) {
        @imgsrc: "https://4xiaer.oss-cn-beijing.aliyuncs.com/jy/
 
[email protected]{counter}.png";
        background-image:url("@{imgsrc}");
    }
}
.loop(1);

Less的字串拼接

拼接示例如下：

後面的用到了再繼續補充吧。

怎麼忽悠一個UI給我漫島免費做設計啊，好難啊！