☘ @nanarino/stylus 样式包

使用 styl 来编写的纯 CSS 库

利用

# 安装 npm 套件
pnpm i @nanarino/stylus

# 在jsx中 `import '@nanarino/stylus'`
# 在css中 `@import url('@nanarino/stylus')`

# 在stylus中可以引入其部分源码 见 `import '@nanarino/stylus/lib/index.styl'`

运行

# 克隆仓库然后安装依赖
pnpm i
# 运行开发服务器
pnpm dev

构建

# 修改比如配色默认字体后你可以本地构建文档和样式
# 构建文档
pnpm build:docs
# 构建样式
pnpm build:styl

借物

• icon: arco官方图标库
• color: arco默认配色
• background: css-doodle
• inspiration: affinity-css
• fonts: HYWenHei-85W 和 JetBrains Mono （并非本样式库的预设）

约束

• astro:

  • 不省略分号。
  • 模板外不能含有tsx表达式。
  • 模板中 jsx的attr里含有 " 时需要转义。
  • 直接内嵌客户端脚本时 不省略 is:inline 并使用IIFE
  • style 物件写法 需要转义2次 : 写作 \\\:

• mdx:

  • 不能含有js/ts注释。
  • 分割线使用 *** 而不 ---。
  • style 物件写法 需要转义2次 : 写作 \\\:

• styl:

  • 非跨行组件不设置行高。
  • 省略冒号分号逗号和花括号。
  • 用 @import 先引入css ，再用 @require 引入stylus。
  • colors = (red #F00) 写法应改为Record colors = {red: #F00} 。
  • 使通配符引入时要确保引入顺序 以确保譬如含有 &>* 的选择器被 & 覆盖。

相容

0.x 版本叫 nanarinostyl 相容性同 1.x 。 特别的部分给出说明

Support	Version
Chrome	105
Edge	105
Firefox	121
Opera	91
Safari	18
Chrome Android	105
Firefox for Android	121
Opera Android	72
Safari on iOS	18
Samsung Internet	20.0