https://github.com/nanarino/stylus

my style library
https://github.com/nanarino/stylus

astro-theme mdx-theme

Last synced: 2 months ago
JSON representation

my style library

• Host: GitHub
• URL: https://github.com/nanarino/stylus
• Owner: nanarino
• License: mit
• Created: 2023-05-23T08:36:04.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2026-01-19T10:48:50.000Z (5 months ago)
• Last Synced: 2026-01-19T16:58:07.455Z (5 months ago)
• Topics: astro-theme, mdx-theme
• Language: Stylus
• Homepage: https://nanarino.github.io/stylus/
• Size: 23.1 MB
• Stars: 20
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.rst
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
=========================

☘ @nanarino/stylus 样式包

=========================

.. image:: ./docs/icons/logo/color/clover.svg

    :width: 64 px

    :alt: nanarino Logo

    :target: https://nanarino.github.io/stylus/

使用 ``styl`` 来编写的纯 CSS 库

.. image:: https://img.shields.io/badge/stylus-6da13f.svg?style=for-the-badge&logo=stylus

    :alt: Stylus

    :target: https://stylus-lang.com/

.. image:: https://img.shields.io/badge/maintained%20with-pnpm%2010.16.0-cc00ff.svg?style=for-the-badge&logo=pnpm

    :alt: pnpm 10.16.0

    :target: https://pnpm.io/

.. image:: https://img.shields.io/badge/Node.js-v22.19.0-026e00.svg?style=for-the-badge&logo=nodedotjs

    :alt: Node.js v22.19.0

    :target: https://nodejs.org/

.. highlight:: bash

利用

======

::

    # 安装 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

* mdx:

    - 不能含有js/ts注释。

    - 分割线使用 ``***`` 而不 ``---``。

* styl:

    - 非跨行组件不设置行高。

    - 省略冒号分号逗号和花括号。

    - 用 ``@import`` 先引入css ，再用 ``@require`` 引入stylus。

    - ``colors = (red #F00)`` 写法应改为Record ``colors = {red: #F00}`` 。

    - 使通配符引入时要确保引入顺序 以确保譬如含有 ``&>*`` 的选择器被 ``&`` 覆盖。

    - 变量名不使用 ``-`` 和 ``_`` 以外的分割字元，否则将导致在less里不方便使用 。

相容

======

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    |

+---------------------+---------+