Skip to content

Commit

Permalink
Added simplified Chinese docs
Browse files Browse the repository at this point in the history
  • Loading branch information
adamlui committed Mar 11, 2024
1 parent 57e1fed commit 6f7ae98
Show file tree
Hide file tree
Showing 3 changed files with 263 additions and 0 deletions.
20 changes: 20 additions & 0 deletions scss-to-css/docs/zh-cn/LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div align="right">
<h6>
<picture>
<source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/adamlui/js-utils/main/docs/images/earth-icon/white/icon32.svg">
<img height=14 src="https://raw.githubusercontent.com/adamlui/js-utils/main/docs/images/earth-icon/black/icon32.svg">
</picture>
&nbsp;简体中文 |
<a href="../LICENSE.md">English</a>
</h6>
</div>

# 🏛️ MIT 许可证

**版权所有 © 2023–2024 [刘展鹏 (Adam Lui)](https://github.com/adamlui)**

特此免费向任何获得副本的人授予许可本软件和相关文档文件(『软件』),处理在软件中不受限制,包括但不限于权利使用、复制、修改、合并、发布、分发、再许可和/或出售该软件的副本,并允许该软件是提供这样做,但须满足以下条件:

上述版权声明和本许可声明应包含在所有软件的副本或重要部分。

本软件『按原样』提供,不提供任何形式的明示或保证暗示的,包括但不限于适销性保证,适用于特定目的和非侵权。 在任何情况下都不得作者或版权持有人对任何索赔、损害或其他责任,无论是在合同、侵权或其他方面的行为中,由以下原因引起,出于或与软件或使用或其他交易有关软件。
227 changes: 227 additions & 0 deletions scss-to-css/docs/zh-cn/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
<div align="right">
<h6>
<picture>
<source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/adamlui/js-utils/main/docs/images/earth-icon/white/icon32.svg">
<img height=14 src="https://raw.githubusercontent.com/adamlui/js-utils/main/docs/images/earth-icon/black/icon32.svg">
</picture>
&nbsp;简体中文 |
<a href="../..#readme">English</a>
</h6>
</div>

# { } scss-to-css.js

### 将所有 SCSS 文件递归编译为缩小的 CSS。

<a href="https://www.npmjs.com/package/@adamlui/scss-to-css"><img height=31 src="https://img.shields.io/npm/dt/%40adamlui%2Fscss-to-css?label=%E4%B8%8B%E8%BD%BD&logo=npm&logoColor=white&labelColor=464646&style=for-the-badge"></a>
<a href="#%EF%B8%8F-mit-%E8%AE%B8%E5%8F%AF%E8%AF%81"><img height=31 src="https://img.shields.io/badge/许可证-MIT-red.svg?logo=internetarchive&logoColor=white&labelColor=464646&style=for-the-badge"></a>
<a href="https://www.npmjs.com/package/@adamlui/scss-to-css?activeTab=versions"><img height=31 src="https://img.shields.io/badge/最新版本-1.5.2-fc7811.svg?logo=icinga&logoColor=white&labelColor=464646&style=for-the-badge"></a>
<a href="https://www.npmjs.com/package/@adamlui/scss-to-css?activeTab=code"><img height=31 src="https://img.shields.io/npm/unpacked-size/%40adamlui%2Fscss-to-css?label=%E6%8B%86%E5%B0%81%E5%B0%BA%E5%AF%B8&style=for-the-badge&logo=ebox&logoColor=white&color=blue&labelColor=464646"></a>
<a href="https://sonarcloud.io/component_measures?metric=new_vulnerabilities&id=adamlui_js-utils:scss-to-css/scss-to-css.js"><img height=31 src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fsonarcloud.io%2Fapi%2Fmeasures%2Fcomponent%3Fcomponent%3Dadamlui_js-utils%3Ascss-to-css%2Fscss-to-css.js%26metricKeys%3Dvulnerabilities&query=%24.component.measures.0.value&style=for-the-badge&logo=sonarcloud&logoColor=white&labelColor=464646&label=%E6%BC%8F%E6%B4%9E&color=gold"></a>

<img height=8px width="100%" src="https://github.com/adamlui/js-utils/blob/main/docs/images/aqua-separator.png">

## ⚡ 如何安装

作为**全局实用程序**

```
npm install -g @adamlui/scss-to-css
```

作为**开发人员依赖**(例如,对于构建脚本):

```
npm install -D @adamlui/scss-to-css
```


作为**运行时依赖**(例如,用于动态编译):

```
npm install @adamlui/scss-to-css
```

## 💻 命令行使用

基本的**全局命令**是:

```
scss-to-css
```

示例输出:

<img src="https://github.com/adamlui/js-utils/blob/main/scss-to-css/media/images/sample-output.png">

**💡 笔记:** 默认情况下也会生成源映射,除非传递 `-S``--no-source-maps`

#

指定**输入/输出**路径:

```
scss-to-css [input_path] [output_path]
```

- `[input_path]`: SCSS 文件或包含要编译的 SCSS 文件的目录的路径,相对于当前工作目录。
- `[output_path]`: 将存储 CSS + 源映射文件的文件或目录的路径,相对于原始文件位置(如果未提供,则使用 `css/`)。

**💡 注意:** 如果传递文件夹,文件将被递归处理,除非传递 `-R``--no-recursion`

#

要用作 **包脚本**,请在项目的 `package.json` 中:

```json
"scripts": {
"build:css": "<scss-to-css-cmd>"
},
```

`<scss-to-css-cmd>` 替换为 `scss-to-css` + 可选参数。 然后,可以使用 `npm run build:css` 来运行该命令。
<br><br>

### 命令示例

编译 **当前目录** 中的所有 SCSS 文件(输出到 `css/`):

```
scss-to-css
```

编译 **特定目录** 中的所有 SCSS 文件(输出到 `path/to/your/directory/css/`):

```
scss-to-css path/to/your/directory
```

编译一个**特定文件**(输出到 `path/to/your/css/file.min.css`):

```
scss-to-css path/to/your/file.scss
```

指定 **输入和输出** 目录(输出到 `output_folder/`):

```
scss-to-css input_folder output_folder
```

**💡 注意:** 除非传递 `-M``--no-minify` ,否则输出 CSS 会被缩小。
<br><br>

### 命令行选项

```
配置选项:
-n, --dry-run 实际上并不缩小文件,只是显示它们是否会被处理。
-d, --include-dotfolders 在文件搜索中包括点文件夹。
-S, --no-source-maps 防止生成源映射。
-M, --no-minify 禁用输出 CSS 的缩小。
-R, --no-recursion 禁用递归文件搜索。
-q, --quiet 禁止除错误之外的所有日志记录。
信息命令:
-h, --help 显示帮助屏幕。
-v, --version 显示版本号。
```

## 🔌 API 参考

您还可以将 **scss-to-css** 导入您的应用程序以使用其 API 方法,无论是作为 ECMAScript 模块还是 CommonJS 模块。

#### ESM:

```js
import * as scssToCSS from '@adamlui/scss-to-css';
```

#### CJS:

```js
const scssToCSS = require('@adamlui/scss-to-css');
```

### compile(inputPath, options)

此函数将在 `inputPath` 中找到的 SCSS 编译为 CSS 数据。

如果传递 **文件路径**,则文件的代码将编译为 CSS,然后返回一个包含 `srcPath` + `code` + `error` 的对象:

```js
const compileResult = scssToCSS.compile('assets/style.scss');
console.log(compileResult.error); // 运行时错误,如果没有错误则为 `undefined`
console.log(compileResult.code); // 编译后的 assets/style.scss CSS 输出
```

如果传递 **目录路径**,则搜索 SCSS 文件(默认情况下递归),加载每个文件的代码并编译,然后返回包含 `srcPath` + `code` + `error` 的对象数组:

```js
const results = scssToCSS.compile('.');
results.forEach(result =>
console.log(result.srcPath) // 工作目录 + 所有嵌套目录中 SCSS 文件的路径
);
console.log(results[1].code); // 如果找到,则编译第二个 SCSS 文件的 CSS 输出,如果未找到,则为 `undefined`
```

选项是布尔值,作为对象属性传递。 例如:

```js
scssToCSS.compile(inputDir, { minify: false });
// returns data objects where `.code` contains unminified CSS
```

可能的参数(及其默认设置)有:

```
recursive (true) 如果传递目录路径,则递归搜索嵌套文件。
verbose (true) 在控制台/终端中显示日志记录。
dotFolders (false) 在文件搜索中包括点文件夹。
minify (true) 缩小输出 CSS。
sourceMaps (true) 生成 CSS 源映射。
```

### findSCSS(searchDir, options)

此函数搜索传递的 `searchDir` 字符串中的所有 SCSS 文件(对于发现 [`compile()`](#compileinputpath-options) 将处理哪些文件很有用)并返回包含其文件路径的数组。

选项是布尔值,作为对象属性传递。 例如:

```js
scssToCSS.findSCSS(searchDir, { recursive: false });
// 返回包含恰好位于“searchDir”中的 SCSS 文件的文件路径的数组
```

可能的参数(及其默认设置)有:

```
recursive (true) 如果传递目录路径,则递归搜索嵌套文件。
verbose (false) 在控制台/终端中显示日志记录。
dotFolders (false) 在文件搜索中包括点文件夹。
```

<br>

## 💖 支持

如果这对您有帮助,请考虑[给予 GitHub ⭐](https://github.com/adamlui/js-utils)
<br><br>

## 🏛️ MIT 许可证

**版权所有 © 2023–2024 [刘展鹏 (Adam Lui)](https://github.com/adamlui)**

特此免费向任何获得副本的人授予许可本软件和相关文档文件(『软件』),处理在软件中不受限制,包括但不限于权利使用、复制、修改、合并、发布、分发、再许可和/或出售该软件的副本,并允许该软件是提供这样做,但须满足以下条件:

上述版权声明和本许可声明应包含在所有软件的副本或重要部分。

本软件『按原样』提供,不提供任何形式的明示或保证暗示的,包括但不限于适销性保证,适用于特定目的和非侵权。 在任何情况下都不得作者或版权持有人对任何索赔、损害或其他责任,无论是在合同、侵权或其他方面的行为中,由以下原因引起,出于或与软件或使用或其他交易有关软件。

<br>

<img height=6px width="100%" src="https://raw.githubusercontent.com/adamlui/js-utils/main/docs/images/aqua-separator.png">

<a href="https://github.com/adamlui/js-utils">****</a> /
<a href="https://github.com/adamlui/js-utils/discussions">讨论</a> /
<a href="#--scss-to-css">回到顶部 ↑</a>
16 changes: 16 additions & 0 deletions scss-to-css/docs/zh-cn/SECURITY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div align="right">
<h6>
<picture>
<source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/adamlui/js-utils/main/docs/images/earth-icon/white/icon32.svg">
<img height=14 src="https://raw.githubusercontent.com/adamlui/js-utils/main/docs/images/earth-icon/black/icon32.svg">
</picture>
&nbsp;简体中文 |
<a href="../SECURITY.md">English</a>
</h6>
</div>

# 🛡️ 安全政策

如果您发现漏洞,请打开[安全公告草案](https://github.com/adamlui/js-utils/security/advisories/new)

也欢迎拉取请求,但出于安全原因,请发送电子邮件至 <adam@kudoai.com> 并等待回复后再公开。

0 comments on commit 6f7ae98

Please sign in to comment.