Tailwind 用户享受原子类，却常嫌缺少组件级样式；Bootstrap 用户想要 Sass 的灵活与可定制，又被其约定束缚。想要一个“既给原子类、又给组件、且基于 Sass、可主题化”的框架，得自己组合。
Cirrus 的定位，就是基于 SCSS 的现代框架：实用类 + 组件 + 可主题，框架无关，npm 或 CDN 都可用。

项目基本信息

信息项详情
项目名称Cirrus
GitHub地址https://github.com/Spiderpig86/Cirrus
项目描述为现代 Web 打造的 SCSS 框架，兼顾实用类与组件
作者Spiderpig86
开源协议MIT License
开源状态公开
LanguagesSCSS
支持平台Web
最后更新—

一、项目介绍

Spiderpig86/Cirrus 是一个面向现代 Web 的 SCSS 框架，MIT 协议。它在 Sass 之上同时提供实用类（utility classes）与现成组件，支持主题变量定制，并通过 npm 或 CDN 引入。定位介于 Tailwind 与 Bootstrap 之间：想用原子类就用工具类，想用现成块就套组件。

二、核心优势

  1. SCSS 基石：基于 Sass，主题变量易定制。
  2. 双形态：实用类 + 组件兼具。
  3. 框架无关：纯 CSS 输出，任意前端可用。
  4. 可主题化：通过变量覆盖换肤。
  5. 双渠道：npm 与 CDN 均支持。

三、适用场景

  • 偏好 Sass、需要可定制样式体系。
  • 想要原子类又不想完全手写组件。
  • 做设计系统、统一视觉。
  • 现代 Web 应用与站点。

四、安装教程

安装或 CDN 引入：

npm install cirrus-ui
<link rel='stylesheet' href='https://unpkg.com/cirrus-ui'>

常见报错：未配置 Sass 编译会导致源码样式不生效；CDN 拉取失败多为网络或版本路径问题。

五、使用示例

在入口引入后使用工具类与组件类：

import 'cirrus-ui'
<div class='section'><button class='btn'>提交</button></div>

真实效果：栅格、按钮、卡片等获得 Cirrus 的统一观感，既可用工具类微调，也可直接套组件类。

六、常见问题

Q：必须用 Sass 吗？
A：使用源码需 Sass 编译；走 CDN 预编译版则不需要。
Q：和 Tailwind 区别？
A：Cirrus 同时提供组件，而 Tailwind 偏纯原子类。
Q：组件够用吗？
A：覆盖常见界面组件，复杂业务仍需自行扩展。

七、总结

Cirrus 把实用类与组件放进同一个基于 SCSS 的框架，给偏好 Sass 又想要灵活定制的团队一个 Tailwind 与 Bootstrap 之外的折中方案。对现代 Web 项目，它兼顾速度与可控；MIT 协议、npm/CDN 双渠道。