Sassy-Gridlover 项目教程

Sassy-Gridlover 项目教程

Sassy-Gridlover Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app. 项目地址: https://gitcode.com/gh_mirrors/sa/Sassy-Gridlover

1. 项目目录结构及介绍

Sassy-Gridlover 项目的目录结构如下：

Sassy-Gridlover/
├── example/
├── sassdoc/
├── sassy-gridlover/
├── test/
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── ISSUE_TEMPLATE.md
├── LICENSE
├── PULL_REQUEST_TEMPLATE.md
├── README.md
├── bower.json
├── config.json
├── package.json
└── sache.json

目录介绍：

• example/: 包含项目的示例文件，展示了如何使用 Sassy-Gridlover 的 Sass 混入。
• sassdoc/: 包含 Sass 文档，提供了详细的 API 文档和使用说明。
• sassy-gridlover/: 包含项目的主要 Sass 文件，定义了各种混入和配置变量。
• test/: 包含项目的测试文件，用于确保代码的正确性和稳定性。
• .editorconfig: 配置文件，用于统一代码编辑器的格式设置。
• .gitattributes: Git 属性配置文件，用于指定文件的属性。
• .gitignore: Git 忽略文件配置，指定哪些文件或目录不需要被 Git 跟踪。
• .travis.yml: Travis CI 配置文件，用于自动化测试和部署。
• CHANGELOG.md: 项目更新日志，记录了每个版本的变更内容。
• CODE_OF_CONDUCT.md: 行为准则，规定了项目参与者的行为规范。
• CONTRIBUTING.md: 贡献指南，指导开发者如何为项目做出贡献。
• ISSUE_TEMPLATE.md: 问题模板，用于规范化提交问题的格式。
• LICENSE: 项目许可证，规定了项目的使用和分发条款。
• PULL_REQUEST_TEMPLATE.md: 拉取请求模板，用于规范化提交代码变更的格式。
• README.md: 项目自述文件，提供了项目的概述和基本使用说明。
• bower.json: Bower 包管理器的配置文件，用于管理前端依赖。
• config.json: 项目配置文件，定义了项目的各种配置选项。
• package.json: npm 包管理器的配置文件，用于管理 Node.js 依赖。
• sache.json: Sache 配置文件，用于指定项目的元数据。

2. 项目启动文件介绍

Sassy-Gridlover 项目的主要启动文件是 sassy-gridlover/sassy-gridlover.scss。这个文件包含了项目的核心 Sass 混入和配置变量。

主要内容：

• 配置变量: 定义了项目的基础字体大小、行高、单位、缩放因子等。
• 混入: 提供了用于设置 HTML、Body、标题和段落等元素的混入，帮助开发者快速建立模块化比例和垂直节奏的排版系统。

使用方法：

在项目的主样式表中导入 sassy-gridlover.scss 文件：

@import "path/to/sassy-gridlover/sassy-gridlover";

然后根据需要调整配置变量的值，并使用提供的混入来设置样式。

3. 项目的配置文件介绍

Sassy-Gridlover 项目的配置文件主要包括 config.json 和 package.json。

config.json

config.json 文件定义了项目的各种配置选项，例如基础字体大小、行高、单位等。开发者可以根据需要修改这些配置，以适应不同的项目需求。

package.json

package.json 文件是 npm 包管理器的配置文件，定义了项目的依赖、脚本、版本等信息。开发者可以通过这个文件来管理项目的依赖和自动化任务。

使用方法：

在项目根目录下找到 config.json 和 package.json 文件，根据需要修改配置选项。然后使用 npm 或 yarn 安装依赖并运行项目。

npm install
npm start

通过以上步骤，开发者可以快速上手并使用 Sassy-Gridlover 项目。

Sassy-Gridlover Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app. 项目地址: https://gitcode.com/gh_mirrors/sa/Sassy-Gridlover