48 lines
2.3 KiB
Markdown
48 lines
2.3 KiB
Markdown
|
---
|
|||
|
|
id: 587d7dbf367417b2b2512bbc
|
|||
|
|
title: Розділіть свої стилі на менші частини - партіали (Partials)
|
|||
|
|
challengeType: 0
|
|||
|
|
forumTopicId: 301459
|
|||
|
|
dashedName: split-your-styles-into-smaller-chunks-with-partials
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
<dfn>Партіали</dfn> у Sass є окремими файлами, які містять сегменти коду CSS. Їх імпортують і використовують в інших файлах Sass. Це відмінний спосіб групування ідентичних кодів у впорядкований модуль.
|
|||
|
|
|
|||
|
|
Назви партіалів починаються з підкреслених символів (`_`), що повідомляють Sass про те, що вони є невеликим сегментом коду CSS, який непотрібно конвертувати у файл CSS. Окрім того, файли Sass закінчуються розширенням `.scss`. Щоб перевести код у партіалі в інший файл Sass, використовуйте директиву `@import`.
|
|||
|
|
|
|||
|
|
Наприклад, якщо всі міксини збережено в партіалі під назвою "\_mixins.scss", і вони також потрібні у файлі "main.scss", то їх використовують в основному файлі таким чином:
|
|||
|
|
|
|||
|
|
```scss
|
|||
|
|
@import 'mixins'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Зверніть увагу, що підкреслення та розширення файлу не потрібні в операторі `import` - Sass ідентифікує, що це партіал. Як тільки партіал імпортовано у файл, усі змінні, міксини та інші коди стають доступними для використання.
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Напишіть оператор `@import` щоб імпортувати партіал із назвою `_variables.scss` до файлу.scss.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Ваш код повинен використовувати директиву `@import` і не містити підкреслення в назві файлу.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/@import\s+?('|")variables\1/gi));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- The main.scss file -->
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
@import 'variables'
|
|||
|
|
```
|