小编sam*_*pls的帖子

我试图在我的 SVG（它被设置为背景图像）中使用 CSS 变量作为填充颜色，但我很难让它工作。它显示默认黑色，但是当我检查它时，我可以看到 css 变量在那里并显示我想要的颜色。

HTML

<div class="test">
  Testing the css variable color
</div>

<div class="icon">

</div>

CSS

:root {
  --primary-color: hsl(332, 61%, 78%);
}

div {
  width: 100px;
  height: 100px; 
}

.test {
  background: var(--primary-color);
}

.icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='var(--primary-color)' /%3E%3C/svg%3E");
}

这是一个要检查的代码笔！

我在这里看到了在 SVG 中使用了 CSS 变量，但我不确定是否可以处理背景图像？我是使用 SVG 和 CSS 变量的新手，所以我不确定我是否做错了什么......希望了解为什么它不能正确呈现颜色！

我正在使用 CSS 网格为卡片项目列表创建水平滚动。当您到达水平滚动的末尾时，我需要在左侧列表的第一项和右侧列表的最后一项留出间距。但是，当滚动列表中间时，两侧不应有任何间距。

要求

1. 卡片列表开头的间距（左侧）
2. 卡片列表末尾的间距（右侧）
3. 显示的卡片数量必须为 2.5（页面加载时，显示 2.5 张卡片表示可以水平滚动）
4. 列表中的项目数量可能会有所不同，因此无法使用显式网格

列表开头的示例，左侧有空格：

向右滚动时应该如何显示以及在左侧不应该如何显示的示例：

列表末尾的示例，右侧有空格：

这是我想要实现的目标的代码笔。

我尝试在 ol 上使用 a::before和::after来尝试填充列表开头和结尾的空白空间，但遇到了奇怪的结果。

   ol {
  padding: 0;
  list-style: none;
  display: grid; 
  grid-auto-flow: column;
  grid-gap: 1rem;
  overflow-x: auto;
  grid-template-columns: 1rem repeat(auto-fill, calc((20rem - 2rem) / var(--visible-cards))) 1rem;
  margin-left: -1rem;
  margin-right: -1rem;

  &::before,
  &::after {
    content: '';
  }

  &::before {
    grid-column: 1;
    background: blue;
  }

  &::after {
    grid-column: -1;
    background: red;
  }

并不::after像我想象的那样位于列表的末尾grid-column: -1，而是在水平滚动开始之前位于可见区域的末尾。有谁知道达到要求的方法吗？如果你这样做的话，先谢谢了！

所以我一直在尝试在HSLA中使用CSS变量。我需要保持相同的颜色，但只需更改不透明度。

<div>
// content here
</div>

社会保障体系

:root {
  --color: 332, 61%, 78%;
}

div {
  background: hsla(var(--color), 0.5);
}

https://codepen.io/sammiepls/pen/zLpvXY

所以我想我可以将 hsl 颜色保留在那里，并通过使用变量来更改悬停时的不透明度或诸如此类的东西。如果我只使用纯 CSS，它就可以工作。但我使用的是 SCSS，它导致它失败，因为 SASS 有它自己的 HSL 函数，需要三个值；我得到的错误基本上是没有足够的参数。有人找到解决办法吗？我尝试在整个函数周围使用字符串插值 #{} 但它不起作用。

我在根中定义了一种颜色：

:root {
--purple: hsl(266, 35%, 70%);
}

我正在尝试在SASS函数中使用它来提高透明度：

.purple {
  background: transparentize(#{"var(--primary-color)"}, 0.7)
}

有谁知道使它工作的方法？还是只是不可能？

我正在学习迭代器/生成器，并且想知道是否有办法使迭代器自行重置？就像在你调用最后一个之后.next()有没有办法让它重新启动？

function nextName() {
   const current = names.next().value
  const output = document.querySelector("output")
  if (current) { 
      output.innerText = current.name
    } 
    else { 
     // code to reset it! currently I'm just displaying text
     output.innerText = 'Nothing left'
     }
}

function nameIterator(names) {
  let nextIndex = 0;
  return {
    next: function() {
      return nextIndex < names.length ? 
        { value: names[nextIndex++], done: false } :
        { done: true }
     }
  }
}

这是一个更清晰的代码笔： https://codepen.io/sammiepls/pen/romyKL?editors =1010

因此，当您单击该按钮时，它会调用我的迭代器，每次您单击时，它将一一显示我的名称数组中的名称。如何使其在最后一次单击时重置，以便返回到名字？

所以显示会是这样的：

鲍勃

彼得

莎莉

Bob // …