Styles

一组使用 SCSS 编写的基础样式工具库。

安装#

yarn add @nami-ui/styles

使用#

在你的 SASS 文件中，按如下方式引入它：

@use '@nami-ui/styles/index' as nami;

其中会提供一组 SASS 变量、函数及混入类。

混入#

general-variables()#

打印主题风格无关的 CSS 变量（通常都是一些尺寸相关的变量）：

:root {
  @include nami.general-variables();
}

light-variables()#

打印 light 主题相关的 CSS 变量（配色变量）：

:root {
  @include nami.light-variables();
}

dark-variables()#

打印 dark 主题相关的 CSS 变量（配色变量）：

:root {
  @include nami.dark-variables();
}

variables()#

打印 general 及 light 两组 CSS 变量：

:root {
  @include nami.variables();
  // 等同于：
  // @include nami.general-variables();
  // @include nami.light-variables();
}

暗黑模式#

Nami UI 通过 CSS 变量支持主题风格的切换，默认提供 light 及 dark 两种，除此之外你也可以自行定制其它的。

而对于暗黑模式，因为其实现方式有好几种，且各有优缺点，因此 Nami UI 无法直接提供对暗黑模式的支持，这需要你自己实现，并须在其中使用我们所提供的用于导出 CSS 变量的混入类。

比如通过 prefers-color-scheme 媒体查询来实现暗黑模式：

@use '@nami-ui/styles/index' as nami;

:root {
  @include nami.variables();
}

@media (prefers-color-scheme: dark) {
  :root {
    @include nami.light-variables();
  }
}