Sass-MQ 项目启动与配置教程

一、项目目录结构及介绍

Sass-MQ 是一个用于优雅地编写媒体查询的 Sass Mixin 库。以下是项目的目录结构及各部分的作用：

sass-mq/
├── docs/                # 文档目录，包含项目的文档和示例
├── examples/            # 示例目录，包含使用 Sass-MQ 的示例代码
├── scripts/             # 脚本目录，包含项目构建和测试的脚本
├── test/                # 测试目录，包含单元测试代码
├── .editorconfig         # 编辑器配置文件，用于统一团队开发中的代码风格
├── .gitignore           # Git 忽略文件，用于指定不需要提交到版本控制系统的文件
├── .prettierrc          # Prettier 配置文件，用于格式化代码
├── .sassdocrc           # SassDoc 配置文件，用于生成文档
├── .travis.yml          # Travis CI 配置文件，用于自动化测试和部署
├── CHANGELOG.md         # 更新日志文件，记录项目的更新历史
├── LICENSE.md           # 许可证文件，本项目采用 MIT 许可证
├── README.md            # 项目说明文件，包含项目的介绍和使用说明
├── _mq.import.scss      # Sass 导入文件，用于导入 Sass-MQ 的 mixin
├── _mq.scss             # Sass 主文件，包含 Sass-MQ 的核心代码
├── bower.json           # Bower 配置文件，用于管理项目依赖
├── package-lock.json    # npm 配置文件，记录项目的依赖关系
├── package.json         # npm 配置文件，用于管理项目依赖
└── show-breakpoints.gif # 显示断点的 GIF 图片，用于示例

二、项目的启动文件介绍

_mq.scss 是项目的启动文件，它包含了 Sass-MQ 的核心代码。在使用前，你需要通过 Bower、npm 或 yarn 安装项目，或者在 Sass 项目中下载 _mq.scss 文件并进行导入。

安装方法如下：

• 使用 Bower：bower install sass-mq --save
• 使用 npm：npm install sass-mq --save
• 使用 yarn：yarn add sass-mq

安装后，你可以在你的 Sass 文件中导入 _mq.import.scss 或 _mq.scss：

@import 'path/to/mq';

或者使用新的 @use 导演：

@use 'path/to/mq';

三、项目的配置文件介绍

Sass-MQ 的配置主要通过修改 _mq.scss 文件中的变量来完成。以下是几个常用的配置项：

1. $breakpoints：定义断点，例如：

$breakpoints: (
  mobile: 320px,
  tablet: 740px,
  desktop: 980px,
  wide: 1300px
);

2. $show-breakpoints：在开发过程中显示当前活动断点，例如：

$show-breakpoints: (mobile, tablet, desktop, wide);

3. $media-type：指定媒体类型，例如：

$media-type: screen;

在导入 _mq.scss 或 _mq.import.scss 后，你可以根据项目需求修改这些变量来定制你的媒体查询。