第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在Less中循環(huán)遍歷變量名稱數(shù)組

在Less中循環(huán)遍歷變量名稱數(shù)組

慕婉清6462132 2019-11-30 13:38:38
在我們的應(yīng)用程序中，我們有一個預(yù)設(shè)的顏色列表，用戶可以從中選擇顏色，并且與該用戶相關(guān)的所有內(nèi)容都將具有該顏色。在整個應(yīng)用程序中，我們將提供帶有顏色作為類名稱附加的各種模塊。例如。<div class="example_module green">  ...</div>我們在CSS中使用LESS。在許多地方，我們正在做這樣的事情：.example_module.green { background: @green; }.example_module.red { background: @red; }.example_module.blue { background: @blue; }etc我希望能夠?qū)⑺羞@些顏色名稱設(shè)置為數(shù)組并對其進(jìn)行迭代。如果將來添加顏色，則只需將其添加到一個位置。偽代碼：@colors: ['green', 'red', 'blue'];for each @color in @colors {  .example_module.@color { background: @color; }} LESS是否甚至支持這種功能？
查看完整描述

3 回答

?
慕蓋茨4494581

TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個贊

請參閱循環(huán)。例如（假設(shè)@green，@red，@blue變量別處定義）：


@colors: green, red, blue;


.example_module {

    .-(@i: length(@colors)) when (@i > 0) {

        @name: extract(@colors, @i);

        &.@{name} {background: @@name}

        .-((@i - 1));

    } .-;

}

---

在Modern Less中，借助Lists插件可以更直接：


@colors: green, red, blue;


.for-each(@name in @colors) {

    .example_module.@{name} {

        background: @@name;

    }

}

---

在Legacy Less中，語法糖可以使用：


@import "for";


@colors: green, red, blue;


.example_module {

    .for(@colors); .-each(@name) {

        &.@{name} {background: @@name}

    }

}

"for"可以在此處找到導(dǎo)入的代碼段（這只是遞歸的Less循環(huán)的包裝mixin）（此處和此處都帶有示例）。


查看完整回答
反對 回復(fù) 2019-11-30
?
梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個贊

這個mixin對我來說很好用。第二個參數(shù)是可以訪問當(dāng)前迭代元素（@value）和索引（@i）的代碼塊。


定義mixin：


.for(@list, @code) {

    & {

        .loop(@i:1) when (@i =< length(@list)) {

            @value: extract(@list, @i);


            @code();


            .loop(@i + 1);

        }


        .loop();

    }

}

使用：


@colors: #1abc9c, #2ecc71, #3498db, #9b59b6;


.for(@colors, {

    .color-@{i} {

        color: @value;

    }

});

結(jié)果CSS：


.color-1 {

  color: #1abc9c;

}

.color-2 {

  color: #2ecc71;

}

.color-3 {

  color: #3498db;

}

.color-4 {

  color: #9b59b6;

}


查看完整回答
反對 回復(fù) 2019-11-30
?
隔江千里

TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個贊

使用現(xiàn)代的LESS（> = 3.7），可以使用內(nèi)置each函數(shù)：


/* (assuming @clr-green, @clr-red, @clr-blue variables are defined elsewhere) */

@colors: {

  green: @clr-green;

  red: @clr-red;

  blue: @clr-blue;

}


each(@colors, {

  .example_module.@{key} {

    background: @value;

  }

});


查看完整回答
反對 回復(fù) 2019-11-30
  • 3 回答
  • 0 關(guān)注
  • 2498 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號