Blueprint.js scss 中的动态 $ns 变量

Question

我正在使用 Blueprint.js v3.x 并且一直在使用 SASS variables。我想利用 $ns 变量，但我的应用程序处于暗模式。 $ns 变量在上面文件的第 10 行设置为 bp3 !default;，据我所知，这意味着我可以在我的 app.scss 中将它设置为不同的值。那么，只需设置 $ns: bp3-dark; 并以这种方式使用此变量就可以了。但是，将来我想支持 dark/light 模式切换；我怎样才能按照最佳实践，根据上述开关将 $ns 动态设置为正确的值？

Answer 1

经过进一步考虑，我似乎并不完全清楚为什么 $ns变量存在的基本原理：而不是试图用它来参考是否该应用程序处于深色或浅色模式，因此使用它更有意义 (SCSS):

.app {
  .#{$ns}-dark {
    /* set the background color, any other required setup */
    ...
    & .my-button-group.#{$ns}-button-group {
      /* override anything you might want for the element.bp3-button-group
    }
  }
}

本质上，$ns 变量用于指向 bp3 以允许您的 SASS 的 future-proofing。将其更改为 bp3-dark 或任何其他值将破坏此目的。

Blueprint.js scss 中的动态 $ns 变量

Blueprint.js dynamic $ns variable in scss

sass

blueprintjs