在
网站建设过程中我们经常用到CSS，而且还在不断的发展。CSS主要被认为是一种基于一组属性的语言。选择一个元素，定义属性，并为其编写样式。因此我们在建站网站的过程中有了更多可能，比如变量、数学公式、条件逻辑和一堆新的伪选择器等等。
如果我告诉你我们也可以用CSS来创建一个数组呢？更准确地说，我们可以创建一个颜色数组。不要试图搜索MDN或规范，因为这不是一个新的CSS特性，而是我们已经拥有的组合。这就像我们把CSS的特性重新混合到一些新的和不同的东西中。
例如，用逗号分隔的颜色值数组定义一个变量该有多酷:--colors: red, blue, green, purple;更酷的是能够改变一个索引变量，从数组中只选择我们需要的颜色。我知道这个想法听起来不可能，但它是有可能——当然有一些限制，我们会谈到这些限制。
两种颜色的数组，我们将首先从一个变量中定义了两种颜色的基本用例开始:--colors: black, white;对于这一个，我将依靠新的color-mix()功能。MDN有一个很好的解释方式该功能如何工作:这color-mix()函数符号需要两个<color>值，并返回它们在给定色彩空间中按给定量混合的结果。
诀窍是不要使用color-mix()为了它的设计目的—混合颜色—而是使用它来返回它的参数列表中的两种颜色之一。
: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);
}
让我们进入激动人心的部分。我将为它创建一个颜色和变量的多值数组:
--colors: red, blue, green, purple; /* color array */
--n: 4; /* length of the array */
--i: 0; /* index of the color [0 to N-1] */
注意这个变量，--n，这是新的。我用它来定义数组中颜色的数量，也就是它的长度。索引变量与之前基本相同，但它可以增加到N-1选择所需的颜色。我将为你做些改变，创建一个线性渐变背景，而不是使用color-mix()。任何了解我的人都不会对此感到惊讶，因为我一直在尝试渐变。
诀窍是操纵渐变来提取基于索引的颜色。根据定义，颜色之间的渐变过渡，但我们在数组中定义了至少几个实际颜色的像素，而我们在它们之间有颜色的混合或混合。在最顶端，我们可以找到red。在底部，我们可以找到purple。诸如此类。
