- 1
- 2
- 3
- 4
- 5
- 6
- 7
資訊專欄INFORMATION COLUMN
摘要：最近在新項目中引入了來編寫樣式代碼，心想既然用到了這種高端貨，就要用得巧用得妙，不能單純地只是把常用屬性定義成變量或定義重用的代碼塊等等。數(shù)據(jù)可通過空格，逗號或小括號分隔多個值，可用取值。
最近在新項目中引入了 SASS 來編寫樣式代碼，心想既然用到了這種高端貨，就要用得巧用得妙，不能單純地只是把常用屬性定義成變量或定義重用的代碼塊等等。因此在編寫樣式時，都要時刻提醒自己是不是可以巧用SASS來解決一些問題。
這次遇到的需求是， 里有7個重復(fù)的 ，這7個 需要應(yīng)用7中不同顏色的 background-color ，需求很簡單，如下是簡易的效果圖。
針對這個需求，有許多種實現(xiàn)方式，包括傳統(tǒng)的CSS寫法和我們今天要講的使用SASS的編寫方法，具體如下：
HTML結(jié)構(gòu)為：
1. 傳統(tǒng)CSS實現(xiàn)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
最簡單的當然是為每一個 都加一個用于區(qū)分不同 background-color 的類， 每個類里應(yīng)用上不同的背景顏色就OK啦，這我們沒必要多說了。
2. 使用SASS多值變量： listlist 類型有點像js中的數(shù)組。list數(shù)據(jù)可通過空格，逗號或小括號分隔多個值，可用 nth($var,$index) 取值。關(guān)于list數(shù)據(jù)操作還有很多其他函數(shù)如 length($list) ， join($list1,$list2,[$separator]) ， append($list,$value,[$separator]) 等，具體可參考sass Functions（List Functions）。
本需求實現(xiàn)代碼如下：
// 將背景顏色值定義成變量
$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循環(huán)語句為每一個li設(shè)置background-color
@for $i from 1 to length($bgcolorlist)+1 {
#main-container ul li:nth-child(#{$i}) {
background-color: nth($bgcolorlist,$i);
}
}
這里需要注意的幾點是：
from后的數(shù)值，即循環(huán)開始的i值不能為0，這是語法規(guī)定的。
for循環(huán)從 i = 1 開始，但并不是在 i = length($bgcolorlist) 時結(jié)束，我們本來是需要循環(huán)7次，但如果我們寫成 to length($bgcolorlist) 的話，只會循環(huán)6次，因此是 to length($bgcolorlist)+1 。
3. 使用SASS多值變量： map當然，解決這個需求，我們也可以使用 SASS 中的 map 。map類型有點像js中的對象。map數(shù)據(jù)以key和value成對出現(xiàn)，其中value又可以是list。格式為： $map: (key1: value1, key2: value2, key3: value3); ?？赏ㄟ^ map-get($map,$key) 取值。關(guān)于map數(shù)據(jù)還有很多其他函數(shù)如 map-merge($map1,$map2) ， map-keys($map) ， map-values($map) 等，具體可參考sass Functions（Map Functions）。
本需求實現(xiàn)代碼如下：
// 將背景顏色值定義成變量
$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設(shè)置background-color
@each $i, $color in $bgcolorlist {
#main-container ul li:nth-child(#{$i}) {
background-color: $color;
}
}
是不是很簡單呢~其實這種方法本質(zhì)上和使用list的方式是一樣的。
OK，就這么多吧，當然這個小需求的實現(xiàn)方式遠不止這些，選一種自己喜歡的就好啦，都so easy~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111342.html
今天和大家講講，在做算法題時常用的一些技巧。對于平時沒用過這些技巧的人，或許你可以考慮試著去看看在實踐中能否用的上這些技巧來優(yōu)化問題的解，相信一定會讓你有所收獲，不然你看我。 1. 巧用數(shù)組下標 數(shù)組的下標是一個隱含的很有用的數(shù)組，特別是在統(tǒng)計一些數(shù)字，或者判斷一些整型數(shù)是否出現(xiàn)過的時候。例如，給你一串字母，讓你判斷這些字母出現(xiàn)的次數(shù)時，我們就可以把這些字母作為下標，在遍歷的時候，如果字母a遍歷...
摘要：四偽類列舉狀態(tài)偽類狀態(tài)偽類是基于元素當前狀態(tài)進行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時需要添加前綴試驗階段。 一、偽類和偽元素的引入 1. 規(guī)范說明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...
摘要：四偽類列舉狀態(tài)偽類狀態(tài)偽類是基于元素當前狀態(tài)進行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時需要添加前綴試驗階段。 一、偽類和偽元素的引入 1. 規(guī)范說明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...
摘要：發(fā)現(xiàn)有很多東西效果其實可以用偽類或者偽元素實現(xiàn)。記錄下為什么引入偽類和偽元素引入偽類和偽元素概念是為了格式化文檔樹以外的信息，也就是說。偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者列表中的第一個元素。 最近用js實現(xiàn)一些css效果。發(fā)現(xiàn)有很多東西效果其實可以用偽類或者偽元素實現(xiàn)。特地補充下這方面的知識。 記錄下 為什么引入偽類和偽元素 CSS introd...
摘要：節(jié)點具有以下特征的值為的值為元素的標簽名的值為可能是或其子節(jié)點可能是或。添加的這些屬性分別對應(yīng)于每個元素中都存在的下列標準特性。，有關(guān)元素的附加說明信息，一般通過工具提示條顯示出來。 Element 類型 除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現(xiàn) XML 或 HTML 元素，提供了對元素標簽名、子節(jié)點及特...
閱讀 3262·2021-11-11 11:00
閱讀 2582·2019-08-29 11:23
閱讀 1463·2019-08-29 10:58
閱讀 2347·2019-08-29 10:58
閱讀 2965·2019-08-23 18:26
閱讀 2522·2019-08-23 18:18
閱讀 2052·2019-08-23 16:53
閱讀 3427·2019-08-23 13:13
