开源项目 `sass-material-colors` 使用教程

开源项目 sass-material-colors 使用教程

sass-material-colorsAn easy way to use Google's Material Design colors in your Sass/Scss project项目地址:https://gitcode.com/gh_mirrors/sa/sass-material-colors

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

sass-material-colors/
├── LICENSE
├── README.md
├── _colors.scss
├── _colors-hex.scss
├── _colors-hsla.scss
├── _colors-rgba.scss
├── colors/
│   ├── _amber.scss
│   ├── _blue.scss
│   ├── _blue-grey.scss
│   ├── _brown.scss
│   ├── _cyan.scss
│   ├── _deep-orange.scss
│   ├── _deep-purple.scss
│   ├── _green.scss
│   ├── _grey.scss
│   ├── _indigo.scss
│   ├── _light-blue.scss
│   ├── _light-green.scss
│   ├── _lime.scss
│   ├── _orange.scss
│   ├── _pink.scss
│   ├── _purple.scss
│   ├── _red.scss
│   ├── _teal.scss
│   └── _yellow.scss
└── sample/
    ├── _sample-all.scss
    └── _sample-choose.scss

目录结构介绍

• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• _colors.scss: 包含所有颜色的SCSS文件。
• _colors-hex.scss: 使用HEX格式的颜色变量。
• _colors-hsla.scss: 使用HSLA格式的颜色变量。
• _colors-rgba.scss: 使用RGBA格式的颜色变量。
• colors/: 包含各种颜色文件的目录。
  • _amber.scss, _blue.scss, ..., _yellow.scss: 分别定义了不同颜色的SCSS文件。
• sample/: 包含示例文件的目录。
  • _sample-all.scss: 导入所有颜色文件的示例。
  • _sample-choose.scss: 选择性导入颜色文件的示例。

2. 项目的启动文件介绍

项目的启动文件主要是 _colors.scss，它包含了所有颜色的定义。你可以通过以下方式导入这个文件：

@import 'path/to/_colors.scss';

3. 项目的配置文件介绍

项目没有特定的配置文件，但你可以根据需要选择性地导入颜色文件。例如，如果你只需要红色和灰色，可以这样做：

@import 'path/to/colors/_red.scss';
@import 'path/to/colors/_grey.scss';

这样可以帮助你减少打包后的文件大小，避免导入不需要的颜色。

sass-material-colorsAn easy way to use Google's Material Design colors in your Sass/Scss project项目地址:https://gitcode.com/gh_mirrors/sa/sass-material-colors