Package Exports
- @nami-ui/styles
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nami-ui/styles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
id: styles title: Styles subtitle: 样式
一组使用 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();
}
}