feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
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--
|
||||
|
||||
Sass 中的 `@while` 指令與 JavaScript 中的 `while` 類似。 只要滿足條件，它就會一直創建 CSS 代碼。
|
||||
|
||||
`@for` 挑戰提供了一個創建簡單網格系統的示例。 用 `@while` 也可以實現。
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@while $x < 13 {
|
||||
.col-#{$x} { width: 100%/12 * $x;}
|
||||
$x: $x + 1;
|
||||
}
|
||||
```
|
||||
|
||||
首先，定義變量 `$x` 並將其設置爲 1。 接下來，使用 `@while` 指令，*while* `$x` 小於 13 時創建網格系統 。 在設置 `width` 的 CSS 規則後，`$x` 增加 1 以避免無限循環。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `@while` 創建一系列具有不同 `font-sizes` 的 class。
|
||||
|
||||
從 `text-1` 到 `text-5` 應該有 5 個不同的 class。 然後將 `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` class 的 `font-size` 應爲 `15px`。
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
`.text-2` class 的 `font-size` 應爲 `30px`。
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
`.text-3` class 的 `font-size` 應爲 `45px`。
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
`.text-4` class 的 `font-size` 應爲 `60px`。
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
`.text-5` class 的 `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: 用 Mixins 創建可重用 CSS
|
||||
challengeType: 0
|
||||
forumTopicId: 301455
|
||||
dashedName: create-reusable-css-with-mixins
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 Sass 中，<dfn>mixin</dfn> 是一組 CSS 聲明，可以在整個樣式表中重複使用。
|
||||
|
||||
CSS 的新功能需要一段時間適配後，所有瀏覽器後才能完全使用。 隨着瀏覽器的不斷升級，使用這些 CSS 規則時可能需要添加瀏覽器前綴。 考慮 `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` 屬性的元素重寫此規則，或者更改每個值以測試不同的效果，需要花費大量的精力。 Mixins 就像 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 調用而無需添加所有的瀏覽器前綴。 mixin 可以通過 `@include` 指令調用。
|
||||
|
||||
```scss
|
||||
div {
|
||||
@include box-shadow(0px, 0px, 4px, #fff);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
爲 `border-radius` 寫一個 mixin，並給它一個 `$radius` 參數。 應該使用之前例子中的所有瀏覽器前綴。 然後使用 `border-radius` mixin 爲 `#awesome` 元素提供 `15px` 的邊框半徑。
|
||||
|
||||
# --hints--
|
||||
|
||||
應聲明名爲 `border-radius` 的 mixin，其中包含名爲 `$radius` 的參數。
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
應該給 `$radius` 添加 `-webkit-border-radius` 瀏覽器前綴。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
應該給 `$radius` 添加 `-moz-border-radius` 瀏覽器前綴。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
應該給 `$radius` 添加 `-ms-border-radius` 瀏覽器前綴。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
```
|
||||
|
||||
應該給 `$radius` 添加 `border-radius`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
|
||||
4
|
||||
);
|
||||
```
|
||||
|
||||
應使用 `@include` 關鍵字調用 `border-radius mixin`，並將其設置爲 `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: 將一組 CSS 樣式擴展到另一個元素
|
||||
challengeType: 0
|
||||
forumTopicId: 301456
|
||||
dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass 有一個名爲 `extend` 的功能，可以很容易地從一個元素中借用 CSS 規則並在另一個元素上重用它們。
|
||||
|
||||
例如，下面的 CSS 規則塊設置了 `.panel` class 的樣式。 它有 `background-color`，`height` 和 `border`。
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
background-color: red;
|
||||
height: 70px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
```
|
||||
|
||||
現在需要另一個名爲 `.big-panel` 的面板。 它具有與 `.panel` 相同的基本屬性，但還需要 `width` 和 `font-size`。 可以從 `.panel` 複製並粘貼初始 CSS 規則，但是當添加更多類型的面板時，代碼會變得重複。 `extend` 指令是一種重用爲一個元素編寫的規則的簡單方法，可以爲另一個元素重用並添加更多規則：
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@extend .panel;
|
||||
width: 150px;
|
||||
font-size: 2em;
|
||||
}
|
||||
```
|
||||
|
||||
除了新樣式之外，`.big-panel` 將具有與 `.panel` 相同的屬性。
|
||||
|
||||
# --instructions--
|
||||
|
||||
創建一個擴展 `.info` 的 class `.info-important`，並將`background-color` 設置爲洋紅色（magenta）。
|
||||
|
||||
# --hints--
|
||||
|
||||
`info-important` class 應該將 `background-color` 設置爲 `magenta`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`info-important` class 應使用 `@extend` 繼承 `info` class 的樣式。
|
||||
|
||||
```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: 用 Sass 嵌套 CSS
|
||||
challengeType: 0
|
||||
forumTopicId: 301457
|
||||
dashedName: nest-css-with-sass
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass 允許 CSS 規則的嵌套，這在組織樣式表的時候會很有用。
|
||||
|
||||
在 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--
|
||||
|
||||
根據上面關於嵌套的例子，來簡化 `.blog-post` 中兩個子元素的 CSS 代碼。 爲了通過測試，`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--
|
||||
|
||||
Sass 中的 <dfn>Partials</dfn> 是包含 CSS 代碼段的單獨的文件。 這些片段可以導入其它 Sass 文件使用。 可以把類似代碼放到模塊中，以保持代碼結構規整且易於管理。
|
||||
|
||||
partials 的名稱以下劃線（`_`）字符開頭，這樣 Sass 就知道它是 CSS 的一小部分，而不會將其轉換爲 CSS 文件。 此外，Sass 文件以 `.scss` 文件擴展名結尾。 要將 partial 中的代碼放入另一個 Sass 文件中，使用 `@import` 指令。
|
||||
|
||||
例如，如果所有 mixins 都保存在名爲 “\_mixins.scss” 的 partial 中，並且在 “main.scss” 文件中需要它們，下面是使用方法：
|
||||
|
||||
```scss
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
請注意，`import` 語句中不需要下劃線——Sass 知道它是 partial。 將 partial 導入文件後，可以使用所有變量、mixins 和其它代碼。
|
||||
|
||||
# --instructions--
|
||||
|
||||
編寫 `@import` 語句，將名爲 `_variables.scss` 的 partial 導入 main.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 的一個特點是它允許使用變量。 可以在 Sass 中聲明變量，併爲它賦值，就像在 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`。 然後更改 `.blog-post` 和 `h2` 的 `color` 屬性的值爲 `$text-color` 變量。
|
||||
|
||||
# --hints--
|
||||
|
||||
應該把 `$text-color` 聲明一個值爲 `red` 的 Sass 變量。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
|
||||
```
|
||||
|
||||
應使用 `$text-color` 變量來更改 `.blog-post` 和 `h2` 的 `color`。
|
||||
|
||||
```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;}
|
||||
}
|
||||
```
|
||||
|
||||
map 的語法略有不同。 這是一個例子：
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
請注意，需要用 `$key` 變量來引用 map 中的鍵。 否則，編譯後的 CSS 將包含 `color1`，`color2`...... 以上兩個代碼示例都轉換爲以下 CSS：
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
編寫一個 `@each` 指令遍歷列表：`blue, black, red` ，將每個變量分配給 class 爲`.color-bg` 的項目，使每個項目的 `color` 都不一樣。 每個 class 都應該將 `background-color` 設置爲相應的顏色。
|
||||
|
||||
# --hints--
|
||||
|
||||
代碼應使用 `@each` 指令。
|
||||
|
||||
```js
|
||||
assert(code.match(/@each /g));
|
||||
```
|
||||
|
||||
`.blue-bg` class 的 `background-color` 應爲藍色。
|
||||
|
||||
```js
|
||||
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
`.black-bg` class 的 `background-color` 應爲黑色。
|
||||
|
||||
```js
|
||||
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
`.red-bg` class 的 `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--
|
||||
|
||||
可以在 Sass 中使用 `@for` 循環添加樣式，它的用法和 JavaScript 中的 `for` 循環類似。
|
||||
|
||||
`@for` 以兩種方式使用：“開始 through 結束” 或 “開始 to 結束”。 主要區別在於“開始 **to** 結束”*不包括*結束數字，而“開始 **through** 結束”*包括* 結束號碼。
|
||||
|
||||
這是一個開始 **through** 結束的示例：
|
||||
|
||||
```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%;
|
||||
}
|
||||
```
|
||||
|
||||
這是創建網格佈局的有效方法。 現在，有了 12 個可用作 CSS class 的列寬選項。
|
||||
|
||||
# --instructions--
|
||||
|
||||
編寫 `@for` 指令，使 `$j` 的值爲從 1 到 **to** 6。
|
||||
|
||||
它應該創建 5 個名爲 `.text-1` 到 `.text-5` 的 class，其中每個 class 的 `font-size` 設置爲 15px 乘以索引。
|
||||
|
||||
# --hints--
|
||||
|
||||
應使用 `@for` 指令。
|
||||
|
||||
```js
|
||||
assert(code.match(/@for /g));
|
||||
```
|
||||
|
||||
`.text-1` class 的 `font-size` 應爲 15px。
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
`.text-2` class 的 `font-size` 應爲 30px。
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
`.text-3` class 的 `font-size` 應爲 45px。
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
`.text-4` class 的 `font-size` 應爲 60px。
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
`.text-5` class 的 `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'>
|
||||
|
||||
@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--
|
||||
|
||||
Sass 中的 `@if` 指令對於測試特定情況非常有用——它的工作方式與 JavaScript 中的 `if` 語句類似。
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@if $bool == true {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
類似 JavaScript，可以在 Sass 中使用 `@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` 的 mixin，它接受一個參數 `$val`。 mixin 應使用 `@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` 的 mixin，它有一個名爲 `$val` 的參數。
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
mixin 應該有一個 `@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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
mixin 應該有一個 `@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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
mixin 應該有一個 `@else if` 語句來檢查 `$val` 是否等於 `heavy`，並設置 `border` 爲 `3px 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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
mixin 應該有一個 `@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