Sassy Starter 项目教程

Sassy Starter 项目教程

sassy-starter:tada: Sassy starter - HTML / SCSS (SMACSS)项目地址:https://gitcode.com/gh_mirrors/sa/sassy-starter

1. 项目的目录结构及介绍

Sassy Starter 项目的目录结构如下：

├── .gitignore
├── .htaccess
├── sass-lint.yml
├── travis.yml
├── src
│   ├── browserconfig.xml
│   ├── crossdomain.xml
│   ├── humans.txt
│   ├── icons
│   │   ├── apple-touch-icon-114x114-precomposed.png
│   │   ├── apple-touch-icon-57x57-precomposed.png
│   │   └── ...
│   └── ...
└── ...

目录结构介绍

• .gitignore: 用于指定 Git 版本控制系统忽略的文件和目录。
• .htaccess: Apache 服务器的配置文件。
• sass-lint.yml: Sass 代码的 lint 配置文件。
• travis.yml: Travis CI 的配置文件。
• src: 源代码目录，包含项目的各种资源文件。
  • browserconfig.xml: 用于定义 Windows 磁贴的配置。
  • crossdomain.xml: 跨域策略文件。
  • humans.txt: 项目贡献者信息。
  • icons: 图标文件目录。

2. 项目的启动文件介绍

Sassy Starter 项目的启动文件主要是 gulpfile.js，它负责项目的构建和自动化任务。

gulpfile.js

gulpfile.js 是 Gulp 的配置文件，用于定义项目的构建任务。它通常包含以下几个部分：

• 任务定义: 定义各种构建任务，如编译 Sass、监听文件变化等。
• 依赖安装: 使用 npm install 安装项目依赖。
• 监听变化: 使用 gulp 命令启动监听，实时编译和刷新。

3. 项目的配置文件介绍

Sassy Starter 项目的配置文件主要包括 package.json 和 sass-lint.yml。

package.json

package.json 是 Node.js 项目的配置文件，包含项目的基本信息和依赖项。

{
  "name": "sassy-starter",
  "title": "Sassy Starter",
  "description": "A starter toolkit based on Scalable and Modular Architecture for CSS (SMACSS) for Sass (SCSS) projects",
  "author": {
    "name": "Mina Markham",
    "url": "https://github.com/minamarkham"
  },
  "version": "2.1.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git://github.com/minamarkham/sassy-starter.git"
  },
  "homepage": "https://minamarkham.github.io/sassy-starter/",
  "keywords": [
    "sass",
    "scss",
    "doc",
    "boilerplate",
    "starter",
    "gulp",
    "smacss"
  ],
  "bugs": {
    "url": "https://github.com/minamarkham/sassy-starter/issues"
  },
  "dependencies": [],
  "devDependencies": {
    "browser-sync": "^2.0.0-rc4",
    "colors": "^1.1.2",
    "del": "^2.0.2",
    "gulp": "^3"
  }
}

sass-lint.yml

sass-lint.yml 是 Sass 代码的 lint 配置文件，用于定义代码风格和规则。

rules:
  # 规则配置
  ...

以上是 Sassy Starter 项目的基本教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！

sassy-starter:tada: Sassy starter - HTML / SCSS (SMACSS)项目地址:https://gitcode.com/gh_mirrors/sa/sassy-starter