chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Застосування стилю до виконання умови з @while
|
||||
challengeType: 0
|
||||
forumTopicId: 301454
|
||||
dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Директива `@while` - це опція з схожою функціональністю як в циклу `while` в Javascript. Це створює правила СSS до моменту виконання умови.
|
||||
|
||||
Завдання `@for` продемонструвало як створити просту сіткову систему. Це також може працювати з `@while`.
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@while $x < 13 {
|
||||
.col-#{$x} { width: 100%/12 * $x;}
|
||||
$x: $x + 1;
|
||||
}
|
||||
```
|
||||
|
||||
Спершу визначте змінну `$x` та встановіть значення 1. Далі, використовуйте директиву `@while` для створення сіткової системи *за умови *`$x` - менше 13. Після встановлення правила CSS для `width`, `$x` збільшується на 1, щоб уникнути нескінченного циклу.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте `@while` для створення серії класів з різними `font-sizes`.
|
||||
|
||||
Тут повинні бути 5 різних класів від `text-1` до `text-5`. Далі встановіть `font-size` для `15px`, помножений на поточний номер індексу. Переконайтеся, що ви уникаєте безкінечного циклу!
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен використовувати `@while` директиву.
|
||||
|
||||
```js
|
||||
assert(code.match(/@while /g));
|
||||
```
|
||||
|
||||
Ваш код повинен використовувати індексну змінну, яка починається з індексу 1.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$.*:\s*?1;/gi));
|
||||
```
|
||||
|
||||
Ваш код повинен збільшити змінну лічильника.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
|
||||
```
|
||||
|
||||
Ваш клас `.text-1` повинен мати `font-size`-`15px`.
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Ваш клас `.text-2` повинен мати `font-size`-`30px`.
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Ваш клас `.text-3` повинен мати `font-size`-`45px`.
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Ваш клас `.text-4` повинен мати `font-size`-`60px`.
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Ваш клас `.text-5` повинен мати `font-size`-`75px`.
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
$x: 1;
|
||||
@while $x < 6 {
|
||||
.text-#{$x}{
|
||||
font-size: 15px * $x;
|
||||
}
|
||||
$x: $x + 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Створюйте багаторазові СSS з Mixins
|
||||
challengeType: 0
|
||||
forumTopicId: 301455
|
||||
dashedName: create-reusable-css-with-mixins
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В розширенні Sass <dfn>Міксини (Mixins)</dfn> - це група CSS декларацій яка може бути повторно використана в межах всієї таблиці стилів.
|
||||
|
||||
Новіші налаштування CSS потребують трохи часу, перш ніж вони будуть повністю прийняті та готові до використання у всіх браузерах. Оскільки функції додаються до браузерів, правила CSS, що їх використовують, можуть потребувати вендорних (vendor) префіксів. Розглянемо `box-shadow`:
|
||||
|
||||
```scss
|
||||
div {
|
||||
-webkit-box-shadow: 0px 0px 4px #fff;
|
||||
-moz-box-shadow: 0px 0px 4px #fff;
|
||||
-ms-box-shadow: 0px 0px 4px #fff;
|
||||
box-shadow: 0px 0px 4px #fff;
|
||||
}
|
||||
```
|
||||
|
||||
Потрібно вписати чимало тексту, щоб перезаписати це правило для всіх елементів, які мають в собі `box-shadow`, чи щоб змінити кожне значення для перевірки різних ефектів. Міксини - це як функції для CSS. Ось приклад як написати один з них:
|
||||
|
||||
```scss
|
||||
@mixin box-shadow($x, $y, $blur, $c){
|
||||
-webkit-box-shadow: $x $y $blur $c;
|
||||
-moz-box-shadow: $x $y $blur $c;
|
||||
-ms-box-shadow: $x $y $blur $c;
|
||||
box-shadow: $x $y $blur $c;
|
||||
}
|
||||
```
|
||||
|
||||
Визначення починається з `@mixin`, за яким слідує ім'я користувача. Параметри (`$x`,`$y`,`$blur`, та `$c` в прикладі наведеному вище) не є обов'язковими. Тепер, коли нам необхідне правило `box-shadow`, то лише один рядок, що викликає mixin, замінює необхідність введення всіх вендорних префіксів. Міксин викликається директивою `@include`:
|
||||
|
||||
```scss
|
||||
div {
|
||||
@include box-shadow(0px, 0px, 4px, #fff);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Напишіть міксин для `border-radius` і надайте йому параметр `$radius`. В ньому повинні бути використані всі вендорні префікси з прикладу. Після цього використайте міксин `border-radius` для того щоб надати елементу `#awesome` заокруглений радіус зі значенням `15px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен вказати на міксин `border-radius` з параметром `$radius`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
Ваш код повинен включати в себе вендорний префікс `-webkit-border-radius`, який використовує параметр `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код повинен включати в себе вендорний префікс `-moz-border-radius`, який використовує параметр `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код повинен включати в себе вендорний префікс `-ms-border-radius`, який використовує параметр `$radius`.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
```
|
||||
|
||||
Ваш код повинен включати в себе загальне правило `border-radius`, яке використовує параметр `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
|
||||
4
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код повинен викликати `border-radius mixin` використовуючи директиву `@include`, задаючи значення `15px`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Розширюйте набір СSS стилів в інший елемент
|
||||
challengeType: 0
|
||||
forumTopicId: 301456
|
||||
dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass має елемент з назвою `extend` (розширити), який дозволяє запозичити СSS правила у одного елемента та опиратися на них в іншому.
|
||||
|
||||
Наприклад, наведений нижче блок СSS правил стилізує клас `.panel`. Він включає `background-color` (колір фону),`height` (висота) та `border` (рамки).
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
background-color: red;
|
||||
height: 70px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
```
|
||||
|
||||
Тепер вам потрібна ще інша панель з назвою`.big-panel`. Вона має ті ж основні властивості, що і `.panel`, але також потребує `width` (ширина) і `font-size` (розмір шрифту). Можливо скопіювати та вставити початкові правила CSS з `.panel`, але код повторюється, якщо додаєте більше видів панелей. Директива `extend` спрощує повторне використання правил, написаних для одного елемента, і додавання нових для іншого:
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@extend .panel;
|
||||
width: 150px;
|
||||
font-size: 2em;
|
||||
}
|
||||
```
|
||||
|
||||
Поруч з новими стилями, клас `.big-panel` матиме ті ж властивості, що й клас `.panel`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть клас `.info-important`, що розширює `.info`, і оберіть колір фуксії (маджента) для фону `background-color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Оберіть `magenta` як колір фону `background-color` для вашого класу `info-important`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш клас `info-important` повинен мати директиву `@extend`, щоб перейняти дизайн класу `info`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
h3{
|
||||
text-align: center;
|
||||
}
|
||||
.info{
|
||||
width: 200px;
|
||||
border: 1px solid black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h3>Posts</h3>
|
||||
<div class="info-important">
|
||||
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
h3{
|
||||
text-align: center;
|
||||
}
|
||||
.info{
|
||||
width: 200px;
|
||||
border: 1px solid black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.info-important{
|
||||
@extend .info;
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h3>Posts</h3>
|
||||
<div class="info-important">
|
||||
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Вкладення CSS до Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301457
|
||||
dashedName: nest-css-with-sass
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass дає змогу вкласти правила CSS, що корисно для організації таблиці стилів.
|
||||
|
||||
Зазвичай кожний елемент націлений на стилізацію окремої лінії, наприклад:
|
||||
|
||||
```scss
|
||||
nav {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
```
|
||||
|
||||
У великому проєкті файл CSS матиме багато рядків та правил. Ось де вкладання надасть змогу організувати код, помістивши дочірні правила стилю до відповідних батьківських елементів:
|
||||
|
||||
```scss
|
||||
nav {
|
||||
background-color: red;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Скористайтеся методом вкладання, який вказано вище, щоб реорганізувати правила CSS для обох дочірніх елементів `.blog-post`. Для тесту елемент `h1` має бути розташований попереду елемента `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код має реорганізувати правила CSS, щоб умістити `h1` і `p` у батьківському елементі `.blog-post`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
.blog-post {
|
||||
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blog-post">
|
||||
<h1>Blog Title</h1>
|
||||
<p>This is a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
.blog-post {
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blog-post">
|
||||
<h1>Blog Title</h1>
|
||||
<p>This is a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
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'
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Зберігання даних за допомогою змінних Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301460
|
||||
dashedName: store-data-with-sass-variables
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Одна особливість Sass, відмінна від CSS, – це використання змінних. Вони оголошуються і встановлюються для зберігання даних, як в JavaScript.
|
||||
|
||||
У JavaScript змінні визначаються за допомогою ключових слів `let` і `const`. У Sass змінні починаються з `$`, за яким слідує ім'я змінної.
|
||||
|
||||
Ось кілька прикладів:
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
```
|
||||
|
||||
Для використання змінних:
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-family: $main-fonts;
|
||||
color: $headings-color;
|
||||
}
|
||||
```
|
||||
|
||||
Один із прикладів використання змінних – це коли кілька елементів повинні бути одного кольору. Якщо цей колір змінений, єдине місце для редагування коду – це значення змінної.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть змінну `$text-color` і встановіть для неї значення `red`. Потім змініть значення властивості `color` для `.blog-post` і `h2` для змінної `$text-color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
У вашому коді повинна бути оголошена змінна Sass для `$text-color` із значенням `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
|
||||
```
|
||||
|
||||
Ваш код повинен використовувати змінну `$text-color` для зміни `color` для елементів `.blog-post` і `h2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
|
||||
```
|
||||
|
||||
Елемент `.blog-post` повинен мати червоний колір `color`.
|
||||
|
||||
```js
|
||||
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Елементи `h2` повинні мати червоний колір `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post, h2 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="header">Learn Sass</h1>
|
||||
<div class="blog-post">
|
||||
<h2>Some random title</h2>
|
||||
<p>This is a paragraph with some random text in it</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Header #2</h2>
|
||||
<p>Here is some more random text.</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Here is another header</h2>
|
||||
<p>Even more random text within a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
$text-color: red;
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post, h2 {
|
||||
color: $text-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="header">Learn Sass</h1>
|
||||
<div class="blog-post">
|
||||
<h2>Some random title</h2>
|
||||
<p>This is a paragraph with some random text in it</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Header #2</h2>
|
||||
<p>Here is some more random text.</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Here is another header</h2>
|
||||
<p>Even more random text within a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Використовуйте @each для зіставлення елементів в списку
|
||||
challengeType: 0
|
||||
forumTopicId: 301461
|
||||
dashedName: use-each-to-map-over-items-in-a-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Останнє завдання продемонструвало, як директива `@for` використовує початкове і кінцеве значення для повторення циклу певну кількість разів. Sass також пропонує директиву `@each`, яка перебирає кожен елемент в списку або на карті. На кожній ітерації змінній присвоюється поточне значення зі списку або карти.
|
||||
|
||||
```scss
|
||||
@each $color in blue, red, green {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
У карти трохи інший синтаксис. Ось приклад:
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
Зверніть увагу, що змінна `$key` необхідна для посилання на ключі карти. В іншому випадку скомпільований CSS містив би `color1`,`color2`. Обидва наведені вище приклади коду перетворені в наступний CSS:
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Напишіть директиву `@each`, яка проходить список: `blue, black, red` і призначає кожній змінній клас `.color-bg`, де частина `color` змінюється для кожного елемента. Кожен клас повинен встановити для `background-color` відповідний колір.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен містити директиву `@each`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@each /g));
|
||||
```
|
||||
|
||||
Клас `.blue-bg` повинен мати синій `background-color`.
|
||||
|
||||
```js
|
||||
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Клас `.black-bg` повинен мати чорний `background-color`.
|
||||
|
||||
```js
|
||||
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Клас `.red-bg` повинен мати червоний `background-color`.
|
||||
|
||||
```js
|
||||
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@each $color in blue, black, red {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
$colors: (color1: blue, color2: black, color3: red);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Використовуйте @for, щоб створити цикл Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301462
|
||||
dashedName: use-for-to-create-a-sass-loop
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Директива `@for` додає стилі в цикл подібно циклу `for` у JavaScript.
|
||||
|
||||
`@for` використовується двома способами: «від початку до кінця» або «від початку до самого кінця». Основна відмінність полягає в тому, що «від початку **to** до кінця» *виключає* кінцеве число з підрахунку, а «від початку **до самого** кінця» *включає* кінцеве число в підрахунок.
|
||||
|
||||
Ось початок **до** кінцевого прикладу:
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 12 {
|
||||
.col-#{$i} { width: 100%/12 * $i; }
|
||||
}
|
||||
```
|
||||
|
||||
Частина `#{$i}` – це синтаксис, який поєднує змінну (`i`) з текстом для створення рядка. Коли файл Sass конвертовано в CSS, це виглядає приблизно так:
|
||||
|
||||
```scss
|
||||
.col-1 {
|
||||
width: 8.33333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 16.66667%;
|
||||
}
|
||||
|
||||
...
|
||||
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
Це ефективний спосіб створення макету сітки. Тепер у вас є дванадцять варіантів ширини стовпців, доступних як класи CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Напишіть директиву `@for`, яка приймає змінну `$j` від 1 **до** 6.
|
||||
|
||||
Ця функція повинна створити 5 класів з іменами від `.text-1` до `.text-5`, де для кожного `font-size` встановлено значення 15 пікселів, помножене на індекс.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код має застосовувати директиву `@for`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@for /g));
|
||||
```
|
||||
|
||||
Ваш клас `.text-1` повинен мати `font-size` 15 пікселів.
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Ваш клас `.text-2` повинен мати `font-size` 30 пікселів.
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Ваш клас `.text-3` повинен мати `font-size` 45 пікселів.
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Ваш клас `.text-4` повинен мати `font-size` 60 пікселів.
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Ваш клас `.text-5` повинен мати `font-size` 75 пікселів.
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
.text-#{$i} { font-size: 15px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@for $i from 1 to 6 {
|
||||
.text-#{$i} { font-size: 15px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Використовуйте @if і @else, щоб додати логіку у свої стилі
|
||||
challengeType: 0
|
||||
forumTopicId: 301463
|
||||
dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Директива `@if` у Sass корисна для тестування конкретного випадку. Вона працює, так само як оператор `if` у JavaScript.
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@if $bool == true {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Як і в JavaScript, `@else if` і `@else` перевіряють наявність додаткових умов:
|
||||
|
||||
```scss
|
||||
@mixin text-effect($val) {
|
||||
@if $val == danger {
|
||||
color: red;
|
||||
}
|
||||
@else if $val == alert {
|
||||
color: yellow;
|
||||
}
|
||||
@else if $val == success {
|
||||
color: green;
|
||||
}
|
||||
@else {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть міксин з ім'ям `border-stroke`, який приймає параметр `$val`. Міксин повинен перевіряти наступні умови за допомогою `@if`, `@else if` і `@else`:
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
medium - 3px solid black
|
||||
heavy - 6px solid black
|
||||
```
|
||||
|
||||
Якщо `$val` не є `light`, `medium` або `heavy`, для елемента border повинно бути встановлено значення `none`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен задати міксин `border-stroke` з параметром `$val`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
Ваш міксин повинен містити команду з `@if`, щоб перевірити `$val` на значення `light` і встановити для `border` значення `1px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш міксин повинен містити команду з `@else if`, щоб перевірити `$val` на значення `medium` і встановити для `border` значення `3px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш міксин повинен містити команду з `@else if`, щоб перевірити `$val` на значення `heavy` і встановити для `border` значення `6px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш міксин повинен містити оператор `@else`, щоб встановити для `border` значення `none`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
#box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
@include border-stroke(medium);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
@mixin border-stroke($val) {
|
||||
@if $val == light {
|
||||
border: 1px solid black;
|
||||
}
|
||||
@else if $val == medium {
|
||||
border: 3px solid black;
|
||||
}
|
||||
@else if $val == heavy {
|
||||
border: 6px solid black;
|
||||
}
|
||||
@else {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
@include border-stroke(medium);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
```
|
||||
Reference in New Issue
Block a user