# @nami-ui/styles

> nami-ui styles.

Latest version **0.0.6** (published 2021-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nami-ui/styles
pnpm add @nami-ui/styles
yarn add @nami-ui/styles
bun add @nami-ui/styles
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2021-03-31 |
| First published | 2020-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bios Sun |
| Maintainers | biossun, biossun-by-nami-ui |

## Links

- npm: https://www.npmjs.com/package/@nami-ui/styles
- Repository: https://github.com/BiosSun/nami-ui
- Homepage: https://nami-ui.biossun.org/docs/styles
- Issues: https://github.com/BiosSun/nami-ui/issues
- npm.io page: https://npm.io/package/@nami-ui/styles

## Dependencies (1)

- [nojiko](https://npm.io/package/nojiko.md) ^2.0.0

## Recent versions

- 0.0.6 (latest) — 2021-03-31
- 0.0.3 (test) — 2021-02-20
- 0.0.5 — 2021-02-21
- 0.0.4 — 2021-02-20
- 0.0.2 — 2020-12-19
- 0.0.1 — 2020-12-19

## README

---
id: styles
title: Styles
subtitle: 样式
---

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

## 安装

```bash
yarn add @nami-ui/styles
```

## 使用

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

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

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

### 混入

### general-variables()

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

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

### light-variables()

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

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

### dark-variables()

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

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

### variables()

打印 general 及 light 两组 CSS 变量：

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

## 暗黑模式

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

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

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

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

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

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

---
_Source: https://npm.io/package/@nami-ui/styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._