ruby-on-rails - 使用 if 命令的 Rails、Sass 和 MaterializeCSS 变量

Question

我有一个简短的问题，为什么这在我的 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';

我想做的是，如果用户在他们的操作系统中对他/她的颜色模式有不同的系统设置(首选颜色方案)，则覆盖 Materialize CSS 的默认值。

Answer 1

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

裸 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;
  }
}