成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

巧用SASS之如何遍歷n個(gè)子元素并為其設(shè)置屬性

zhou_you / 1517人閱讀

摘要：最近在新項(xiàng)目中引入了來(lái)編寫樣式代碼，心想既然用到了這種高端貨，就要用得巧用得妙，不能單純地只是把常用屬性定義成變量或定義重用的代碼塊等等。數(shù)據(jù)可通過(guò)空格，逗號(hào)或小括號(hào)分隔多個(gè)值，可用取值。

最近在新項(xiàng)目中引入了 SASS 來(lái)編寫樣式代碼，心想既然用到了這種高端貨，就要用得巧用得妙，不能單純地只是把常用屬性定義成變量或定義重用的代碼塊等等。因此在編寫樣式時(shí)，都要時(shí)刻提醒自己是不是可以巧用SASS來(lái)解決一些問(wèn)題。

這次遇到的需求是，

    里有7個(gè)重復(fù)的
  • ，這7個(gè)
  • 需要應(yīng)用7中不同顏色的 background-color ，需求很簡(jiǎn)單，如下是簡(jiǎn)易的效果圖。

    針對(duì)這個(gè)需求，有許多種實(shí)現(xiàn)方式，包括傳統(tǒng)的CSS寫法和我們今天要講的使用SASS的編寫方法，具體如下：

    HTML結(jié)構(gòu)為：

    
    
      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      • 
        
    • 4
      • 
        
    • 5
      • 
        
    • 6
      • 
        
    • 7
      •
    1. 傳統(tǒng)CSS實(shí)現(xiàn)

    最簡(jiǎn)單的當(dāng)然是為每一個(gè)

  • 都加一個(gè)用于區(qū)分不同 background-color 的類， 每個(gè)類里應(yīng)用上不同的背景顏色就OK啦，這我們沒(méi)必要多說(shuō)了。

    2. 使用SASS多值變量： list

    list 類型有點(diǎn)像js中的數(shù)組。list數(shù)據(jù)可通過(guò)空格，逗號(hào)或小括號(hào)分隔多個(gè)值，可用 nth($var,$index) 取值。關(guān)于list數(shù)據(jù)操作還有很多其他函數(shù)如 length($list) ， join($list1,$list2,[$separator]) ， append($list,$value,[$separator]) 等，具體可參考sass Functions（List Functions）。

    本需求實(shí)現(xiàn)代碼如下：

    // 將背景顏色值定義成變量
$red : #FF0000;
$orange : #FFA500;
$yellow : #FFFF00;
$green : #008000;
$bluegreen : #00FFFF;
$blue : #0000FF;
$purple : #800080;

// 定義一個(gè)list儲(chǔ)存背景顏色
$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;

// 使用SASS for循環(huán)語(yǔ)句為每一個(gè)li設(shè)置background-color
@for $i from 1 to length($bgcolorlist)+1 {
    #main-container ul li:nth-child(#{$i}) {
        background-color: nth($bgcolorlist,$i);
    }
}

    這里需要注意的幾點(diǎn)是：

    from后的數(shù)值，即循環(huán)開(kāi)始的i值不能為0，這是語(yǔ)法規(guī)定的。

    for循環(huán)從 i = 1 開(kāi)始，但并不是在 i = length($bgcolorlist) 時(shí)結(jié)束，我們本來(lái)是需要循環(huán)7次，但如果我們寫成 to length($bgcolorlist) 的話，只會(huì)循環(huán)6次，因此是 to length($bgcolorlist)+1 。

    3. 使用SASS多值變量： map

    當(dāng)然，解決這個(gè)需求，我們也可以使用 SASS 中的 map 。map類型有點(diǎn)像js中的對(duì)象。map數(shù)據(jù)以key和value成對(duì)出現(xiàn)，其中value又可以是list。格式為： $map: (key1: value1, key2: value2, key3: value3); ?？赏ㄟ^(guò) map-get($map,$key) 取值。關(guān)于map數(shù)據(jù)還有很多其他函數(shù)如 map-merge($map1,$map2) ， map-keys($map) ， map-values($map) 等，具體可參考sass Functions（Map Functions）。

    本需求實(shí)現(xiàn)代碼如下：

    // 將背景顏色值定義成變量
$red : #FF0000;
$orange : #FFA500;
$yellow : #FFFF00;
$green : #008000;
$bluegreen : #00FFFF;
$blue : #0000FF;
$purple : #800080;

//將背景顏色以鍵值對(duì)的形式存在map中
$bgcolorlist : (
    1: $red,
    2: $orange,
    3: $yellow,
    4: $green,
    5: $bluegreen,
    6: $blue,
    7: $purple);

// 使用SASS each語(yǔ)法為每一個(gè)li設(shè)置background-color
@each $i, $color in $bgcolorlist {
    #main-container ul li:nth-child(#{$i}) {
        background-color: $color;
    }
}

    是不是很簡(jiǎn)單呢~其實(shí)這種方法本質(zhì)上和使用list的方式是一樣的。

    OK，就這么多吧，當(dāng)然這個(gè)小需求的實(shí)現(xiàn)方式遠(yuǎn)不止這些，選一種自己喜歡的就好啦，都so easy~

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111342.html

    相關(guān)文章

    • 一些可以讓你裝逼、讓人眼前一亮的算法技巧總結(jié)

      今天和大家講講，在做算法題時(shí)常用的一些技巧。對(duì)于平時(shí)沒(méi)用過(guò)這些技巧的人，或許你可以考慮試著去看看在實(shí)踐中能否用的上這些技巧來(lái)優(yōu)化問(wèn)題的解，相信一定會(huì)讓你有所收獲，不然你看我。 1. 巧用數(shù)組下標(biāo) 數(shù)組的下標(biāo)是一個(gè)隱含的很有用的數(shù)組，特別是在統(tǒng)計(jì)一些數(shù)字，或者判斷一些整型數(shù)是否出現(xiàn)過(guò)的時(shí)候。例如，給你一串字母，讓你判斷這些字母出現(xiàn)的次數(shù)時(shí)，我們就可以把這些字母作為下標(biāo)，在遍歷的時(shí)候，如果字母a遍歷...

      xiaolinbang 評(píng)論0 收藏0

    • 前端面試題-偽類和偽元素

      摘要：四偽類列舉狀態(tài)偽類狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時(shí)需要添加前綴試驗(yàn)階段。 一、偽類和偽元素的引入 1. 規(guī)范說(shuō)明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

      Cristic 評(píng)論0 收藏0

    • 前端面試題-偽類和偽元素

      摘要：四偽類列舉狀態(tài)偽類狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時(shí)需要添加前綴試驗(yàn)階段。 一、偽類和偽元素的引入 1. 規(guī)范說(shuō)明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

      entner 評(píng)論0 收藏0

    • css偽類和偽元素的學(xué)習(xí)

      摘要：發(fā)現(xiàn)有很多東西效果其實(shí)可以用偽類或者偽元素實(shí)現(xiàn)。記錄下為什么引入偽類和偽元素引入偽類和偽元素概念是為了格式化文檔樹(shù)以外的信息，也就是說(shuō)。偽類和偽元素是用來(lái)修飾不在文檔樹(shù)中的部分，比如，一句話中的第一個(gè)字母，或者列表中的第一個(gè)元素。 最近用js實(shí)現(xiàn)一些css效果。發(fā)現(xiàn)有很多東西效果其實(shí)可以用偽類或者偽元素實(shí)現(xiàn)。特地補(bǔ)充下這方面的知識(shí)。 記錄下 為什么引入偽類和偽元素 CSS introd...

      魏憲會(huì) 評(píng)論0 收藏0

    • 《JavaScript 闖關(guān)記》之 DOM（下）

      摘要：節(jié)點(diǎn)具有以下特征的值為的值為元素的標(biāo)簽名的值為可能是或其子節(jié)點(diǎn)可能是或。添加的這些屬性分別對(duì)應(yīng)于每個(gè)元素中都存在的下列標(biāo)準(zhǔn)特性。，有關(guān)元素的附加說(shuō)明信息，一般通過(guò)工具提示條顯示出來(lái)。 Element 類型 除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現(xiàn) XML 或 HTML 元素，提供了對(duì)元素標(biāo)簽名、子節(jié)點(diǎn)及特...

      mudiyouyou 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    閱讀需要支付1元查看
    <