Bamboo CSS 项目使用教程

1. 项目目录结构及介绍

Bamboo CSS 是一个无类的 CSS 实用库，为所有 HTML 元素提供默认样式。以下是项目的目录结构及其简要介绍：

bamboo/
├── demo/              # 示例文件目录
├── dist/              # 编译后的 CSS 文件目录
├── src/               # 源代码目录
│   ├── index.scss      # 主样式文件
│   └── theme/          # 主题样式目录
│       ├── dark.scss   # 暗色主题样式
│       └── light.scss  # 亮色主题样式
├── .gitignore         # Git 忽略文件
├── LICENSE            # 许可证文件
├── README.md          # 项目说明文件
├── package.json       # 项目配置文件
└── pnpm-lock.yaml     # pnpm 锁文件

2. 项目的启动文件介绍

Bamboo CSS 的使用非常简单，无需复杂的启动过程。如果你希望查看本地编译的样式，可以执行以下步骤：

1. 克隆项目到本地：

   git clone https://github.com/rilwis/bamboo.git
   

2. 安装依赖（如果需要）：

   npm install
   

3. 编译 SCSS 文件到 CSS（如果需要自定义或查看编译过程）：

   npm run build
   

编译后的 CSS 文件会放在 dist 目录中。

3. 项目的配置文件介绍

Bamboo CSS 的配置主要通过修改 src/index.scss 文件来完成。以下是 index.scss 文件的一些关键部分：

• 主题变量：在 index.scss 文件中定义了一系列 CSS 变量，以 --b- 开头，用于控制主题样式，如字体、背景色、文字颜色等。

• 主题样式：在 theme 目录下有 dark.scss 和 light.scss 两个文件，分别定义了暗色和亮色主题的样式。

• 基础样式：在 index.scss 文件中包含了基础的样式定义，这些样式会应用到所有 HTML 元素上。

通过修改 src/index.scss 和 theme 目录下的文件，可以自定义 Bamboo CSS 的样式。在完成自定义后，再次执行编译命令，即可生成新的 CSS 文件。