Rails、Sass 和 MaterializeCSS 变量与 if 命令答案

【问题标题】：Rails, Sass and MaterializeCSS variables with if commandRails、Sass 和 MaterializeCSS 变量与 if 命令
【发布时间】：2021-09-26 11:35:58
【问题描述】：

我有一个简单的问题，为什么这在我的 app/javascript/stylesheets/application.scss

中有效

@import 'materialize-css/sass/components/_color-variables';

$primary-color: color('blue', 'lighten-2') !default;
$secondary-color: color('yellow', 'base') !default;

@import 'materialize-css/sass/materialize';

但这不是

@import 'materialize-css/sass/components/_color-variables';

@if (prefers-color-scheme: dark) == 'dark' {
    $primary-color: color('blue', 'lighten-2') !default;
    $secondary-color: color('yellow', 'base') !default;
}

@import 'materialize-css/sass/materialize';

如果用户在他们的操作系统中为他/她的颜色模式设置了不同的系统设置（prefers-color-scheme），我想要做的是覆盖 Materialize CSS 的默认值。

【问题讨论】：

override Materialize CSS -> 所以@import materialize-css 应该在@if 之前调用，对吧？

标签： ruby-on-rails if-statement sass materialize

【解决方案1】：

答案：没有流控制的变量（您的代码示例 1）可以在 css 编译时设置，因为它已定义。无法在 css 编译时设置具有流控制的变量（您的代码示例 2），因为 (prefers-color-scheme: dark) 未定义。

Bare CSS 文件在运行时不支持流控制逻辑。题外话：但有人说it is Turing-complete。

预处理器 SASS/SCSS 支持流控制逻辑以简化维护。流控制在编译时评估，而不是在运行时评估。换句话说，在编译时(prefers-color-scheme: dark) 不能被评估。当服务器向客户端发送css文件后，客户端的浏览器可以执行window.matchMedia('(prefers-color-scheme: dark)')并根据模式选择正确的样式。编译后的 CSS 文件应如下所示：

@media (prefers-color-scheme: light) {
  div {
    background-color: #0F0;
    color: #F00;
  }
}

@media (prefers-color-scheme: dark) {
  div {
    background-color: #FF0;
    color: #00F;
  }
}

【讨论】：