在網(wǎng)站建設(shè)過程中我們經(jīng)常用到CSS，而且還在不斷的發(fā)展。CSS主要被認(rèn)為是一種基于一組屬性的語(yǔ)言。選擇一個(gè)元素，定義屬性，并為其編寫樣式。因此我們?cè)诮ㄕ揪W(wǎng)站的過程中有了更多可能，比如變量、數(shù)學(xué)公式、條件邏輯和一堆新的偽選擇器等等。

如果我告訴你我們也可以用CSS來創(chuàng)建一個(gè)數(shù)組呢？更準(zhǔn)確地說，我們可以創(chuàng)建一個(gè)顏色數(shù)組。不要試圖搜索MDN或規(guī)范，因?yàn)檫@不是一個(gè)新的CSS特性，而是我們已經(jīng)擁有的組合。這就像我們把CSS的特性重新混合到一些新的和不同的東西中。

例如，用逗號(hào)分隔的顏色值數(shù)組定義一個(gè)變量該有多酷:--colors: red, blue, green, purple;更酷的是能夠改變一個(gè)索引變量，從數(shù)組中只選擇我們需要的顏色。我知道這個(gè)想法聽起來不可能，但它是有可能——當(dāng)然有一些限制，我們會(huì)談到這些限制。

兩種顏色的數(shù)組，我們將首先從一個(gè)變量中定義了兩種顏色的基本用例開始:--colors: black, white;對(duì)于這一個(gè)，我將依靠新的color-mix()功能。MDN有一個(gè)很好的解釋方式該功能如何工作:這color-mix()函數(shù)符號(hào)需要兩個(gè)<color>值，并返回它們?cè)诮o定色彩空間中按給定量混合的結(jié)果。

訣竅是不要使用color-mix()為了它的設(shè)計(jì)目的—混合顏色—而是使用它來返回它的參數(shù)列表中的兩種顏色之一。
:root {
  --colors: black, white; /* define an array of color values */
  --i: 0; 
  
  --_color: color-mix(in hsl, var(--colors) calc(var(--i) * 100%));
}

body {
  color: var(--_color);
}

讓我們進(jìn)入激動(dòng)人心的部分。我將為它創(chuàng)建一個(gè)顏色和變量的多值數(shù)組:
--colors: red, blue, green, purple; /* color array */
--n: 4; /* length of the array  */
--i: 0; /* index of the color [0 to N-1] */
注意這個(gè)變量，--n，這是新的。我用它來定義數(shù)組中顏色的數(shù)量，也就是它的長(zhǎng)度。索引變量與之前基本相同，但它可以增加到N-1選擇所需的顏色。我將為你做些改變，創(chuàng)建一個(gè)線性漸變背景，而不是使用color-mix()。任何了解我的人都不會(huì)對(duì)此感到驚訝，因?yàn)槲乙恢痹趪L試漸變。

訣竅是操縱漸變來提取基于索引的顏色。根據(jù)定義，顏色之間的漸變過渡，但我們?cè)跀?shù)組中定義了至少幾個(gè)實(shí)際顏色的像素，而我們?cè)谒鼈冎g有顏色的混合或混合。在最頂端，我們可以找到red。在底部，我們可以找到purple。諸如此類。