53 lines
2.9 KiB
Markdown
53 lines
2.9 KiB
Markdown
|
---
|
|||
|
|
id: 587d7dbf367417b2b2512bbc
|
|||
|
|
title: Split Your Styles into Smaller Chunks with Partials
|
|||
|
|
required:
|
|||
|
|
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
|||
|
|
raw: true
|
|||
|
|
challengeType: 0
|
|||
|
|
videoUrl: ''
|
|||
|
|
localeTitle: Разделите свои стили на мелкие куски с частицами
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Description
|
|||
|
|
<section id="description"> <code>Partials</code> в Sass - это отдельные файлы, содержащие сегменты кода CSS. Они импортируются и используются в других файлах Sass. Это отличный способ группировать аналогичный код в модуль, чтобы поддерживать его. Имена <code>partials</code> начинаются с символа подчеркивания ( <code>_</code> ), который сообщает Sass, что это небольшой сегмент CSS, а не для преобразования его в файл CSS. Кроме того, файлы Sass заканчиваются расширением <code>.scss</code> . Чтобы привести код в <code>partial</code> файле в другой файл Sass, используйте директиву <code>@import</code> . Например, если все ваши <code>mixins</code> сохранены в <code>partial</code> имени «_mixins.scss», и они необходимы в файле «main.scss», так их можно использовать в основном файле: <blockquote> // В файле main.scss <br><br> @import 'mixins' </blockquote> Обратите внимание, что подчеркивание не требуется в операторе <code>import</code> - Сасс понимает, что он является <code>partial</code> . После <code>partial</code> импортирования в файл доступны все переменные, <code>mixins</code> и другой код. </section>
|
|||
|
|
|
|||
|
|
## Instructions
|
|||
|
|
<section id="instructions"> Напишите оператор <code>@import</code> для импорта <code>partial</code> имени <code>_variables.scss</code> в файл main.scss. </section>
|
|||
|
|
|
|||
|
|
## Tests
|
|||
|
|
<section id='tests'>
|
|||
|
|
|
|||
|
|
```yml
|
|||
|
|
tests:
|
|||
|
|
- text: Ваш код должен использовать директиву <code>@import</code> и не должен содержать подчеркивание в имени файла.
|
|||
|
|
testString: 'assert(code.match(/@import\s+?("|")variables\1/gi), "Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.");'
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Challenge Seed
|
|||
|
|
<section id='challengeSeed'>
|
|||
|
|
|
|||
|
|
<div id='html-seed'>
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
// The main.scss file
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Solution
|
|||
|
|
<section id='solution'>
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// solution required
|
|||
|
|
```
|
|||
|
|
</section>
|