2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
id: 587d7dbf367417b2b2512bbc
|
2020-12-16 07:37:30 +00:00
|
|
|
|
title: 用 Partials 将你的样式分成小块
|
2018-10-10 22:03:03 +00:00
|
|
|
|
challengeType: 0
|
2020-09-07 08:11:08 +00:00
|
|
|
|
forumTopicId: 301459
|
2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --description--
|
2020-09-07 08:11:08 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
Sass 中的`Partials`是包含 CSS 代码段的单独文件。这些是在其他 Sass 文件中导入和使用的。我们可以把类似代码放到模块中,以保持代码结构规整且易于管理。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
`partials`的名称以下划线(`_`)字符开头,告诉 Sass 它是 CSS 的一小部分,而不是将其转换为 CSS 文件。此外,Sass 文件以`.scss`文件扩展名结尾。要将`partial`中的代码放入另一个 Sass 文件中,请使用`@import`指令。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
例如,如果所有`mixins`都保存在名为 "\_mixins.scss " 的`partial`中,并且在"main.scss "文件中需要它们,这是如何在主文件中使用它们:
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```scss
|
|
|
|
|
// In the main.scss file
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
@import 'mixins'
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
请注意,`import`语句中不需要下划线——Sass 知道它是`partial`。将`partial`导入文件后,可以使用所有变量`mixins`和其他代码。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
编写`@import`语句,将名为`_variables.scss`的`partial`导入 main.scss 文件。
|
2020-09-07 08:11:08 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --hints--
|
2020-09-07 08:11:08 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
你的代码应使用`@import`指令,并且不应在文件名中包含下划线。
|
2020-09-07 08:11:08 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
assert(code.match(/@import\s+?('|")variables\1/gi));
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --solutions--
|
2020-08-13 15:24:35 +00:00
|
|
|
|
|