SCSS动态颜色变化[重复]答案

【问题标题】：SCSS dynamic color changing [duplicate]SCSS动态颜色变化[重复]
【发布时间】：2016-01-26 01:57:09
【问题描述】：

我刚开始使用 SCSS，但在动态更改网站颜色时遇到了一些问题。我想要做的是创建一个颜色列表，每次刷新页面时，它都会更改所选颜色。这是代码：

SCSS：

$colors: (
      #cc6698,
      #0869ad,
      #ff8300,
      #7A86b8,
      #f05133,
      #2aa9e0,
      #71bf45,
      #ef0e39,
      #9e79d7,
    );

    $color: nth($colors, random(length($colors)));

但是，它仅在我修改文件时更改颜色，而不是在每次刷新页面时。我该怎么办？谢谢。

【问题讨论】：

我认为你需要 javascript。
你在哪里编译你的 SCSS 文件？
我做的是：“sass watch custom.css:custom.scss --style compressed”
它不会工作，因为你编译了你的 SCSS 文件，它会生成 CSS 文件。然后，当您刷新页面时，不会创建新的 CSS 文件。一种方法是采用我发布的方法。
@GusFulton 你知道 Sass 只能编译成 CSS，对吧？您所要求的要求浏览器本身能够理解 Sass。

标签： css colors sass

【解决方案1】：

您的代码可以工作，但您必须在浏览器中编译您的 SCSS 文件（使用sass.js）才能看到效果。

HTML：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor maiores placeat illo culpa quam, magnam sunt accusantium enim dicta temporibus, reiciendis soluta iure, reprehenderit qui vel perspiciatis suscipit earum asperiores.</p>

SASS：

$colors: (
  #cc6698,
  #0869ad,
  #ff8300,
  #7A86b8,
  #f05133,
  #2aa9e0,
  #71bf45,
  #ef0e39,
  #9e79d7,
);

$color: nth($colors, random(length($colors)));

body {
  color: $color;
}

勾选此项（查看添加文本到段落或刷新页面的效果）：

CODEPEN

【讨论】：

我做同样的事情。我在终端中使用：“sass watch custom.css:custom.scss --style compressed”进行编译，但仍然没有改变。
在您的帖子下方查看我的评论。
我如何使用 sass.js 编译文件？
Codepen 不使用 sass.js。每次请求页面或修改代码时，它都会在服务器上编译它，然后提供编译后的 CSS。
我知道，我不是这方面的专家，但我认为您可以使用 sass.js 以某种方式收到与 Codepen 类似的结果（不是在每个请求上，而是在刷新时）。