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