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

zhou_you 發布于2019-08-29 10:58 / 1440人閱讀

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

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

這次遇到的需求是，

里有7個重復的
，這7個
需要應用7中不同顏色的 background-color ，需求很簡單，如下是簡易的效果圖。

針對這個需求，有許多種實現方式，包括傳統的CSS寫法和我們今天要講的使用SASS的編寫方法，具體如下：

HTML結構為：

1. 傳統CSS實現

最簡單的當然是為每一個

都加一個用于區分不同 background-color 的類，每個類里應用上不同的背景顏色就OK啦，這我們沒必要多說了。

2. 使用SASS多值變量： list

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

本需求實現代碼如下：

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

// 定義一個list儲存背景顏色
$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;

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

這里需要注意的幾點是：

from后的數值，即循環開始的i值不能為0，這是語法規定的。

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

3. 使用SASS多值變量： map

當然，解決這個需求，我們也可以使用 SASS 中的 map 。map類型有點像js中的對象。map數據以key和value成對出現，其中value又可以是list。格式為： $map: (key1: value1, key2: value2, key3: value3); 。可通過 map-get($map,$key) 取值。關于map數據還有很多其他函數如 map-merge($map1,$map2) ， map-keys($map) ， map-values($map) 等，具體可參考sass Functions（Map Functions）。

本需求實現代碼如下：

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

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

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

是不是很簡單呢~其實這種方法本質上和使用list的方式是一樣的。

OK，就這么多吧，當然這個小需求的實現方式遠不止這些，選一種自己喜歡的就好啦，都so easy~

GPU云服務器云服務器屬性遍歷 jquery遍歷元素元素屬性遍歷json對象屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111342.html

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

今天和大家講講，在做算法題時常用的一些技巧。對于平時沒用過這些技巧的人，或許你可以考慮試著去看看在實踐中能否用的上這些技巧來優化問題的解，相信一定會讓你有所收獲，不然你看我。 1. 巧用數組下標數組的下標是一個隱含的很有用的數組，特別是在統計一些數字，或者判斷一些整型數是否出現過的時候。例如，給你一串字母，讓你判斷這些字母出現的次數時，我們就可以把這些字母作為下標，在遍歷的時候，如果字母a遍歷...

xiaolinbang 2019-05-23 16:26 評論0 收藏0
前端面試題-偽類和偽元素

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

Cristic 2019-08-30 14:09 評論0 收藏0
前端面試題-偽類和偽元素

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

entner 2019-08-01 18:41 評論0 收藏0
css偽類和偽元素的學習

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

魏憲會 2019-08-30 14:19 評論0 收藏0
《JavaScript 闖關記》之 DOM（下）

摘要：節點具有以下特征的值為的值為元素的標簽名的值為可能是或其子節點可能是或。添加的這些屬性分別對應于每個元素中都存在的下列標準特性。，有關元素的附加說明信息，一般通過工具提示條顯示出來。 Element 類型除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現 XML 或 HTML 元素，提供了對元素標簽名、子節點及特...

mudiyouyou 2019-08-20 12:26 評論0 收藏0