From 087946adc15e2d3a4006e87ca1b441741b8b57ba Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Mon, 7 Sep 2020 16:11:08 +0800 Subject: [PATCH] fix(i18n): update Chinese translation of sass (#38595) Co-authored-by: Zhicheng Chen --- ...l-a-condition-is-met-with-while.chinese.md | 95 +++++++++------- ...create-reusable-css-with-mixins.chinese.md | 78 ++++++++++--- ...f-css-styles-to-another-element.chinese.md | 69 +++++++++-- .../sass/nest-css-with-sass.chinese.md | 69 +++++++++-- ...to-smaller-chunks-with-partials.chinese.md | 34 ++++-- .../store-data-with-sass-variables.chinese.md | 65 +++++++++-- ...ach-to-map-over-items-in-a-list.chinese.md | 107 +++++++++++++++--- .../use-for-to-create-a-sass-loop.chinese.md | 87 +++++++++++--- ...lse-to-add-logic-to-your-styles.chinese.md | 91 ++++++++++++--- 9 files changed, 560 insertions(+), 135 deletions(-) diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.chinese.md index e5a91edc12..e6ae2105e1 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.chinese.md @@ -2,47 +2,54 @@ id: 587d7dbf367417b2b2512bbb title: Apply a Style Until a Condition is Met with @while challengeType: 0 -videoUrl: '' -localeTitle: 应用样式直到满足@while的条件 +forumTopicId: 301454 +localeTitle: 使用 @while 当条件满足时样式生效 --- ## Description -
@while指令是一个与JavaScript while循环具有类似功能的选项。它会创建CSS规则，直到满足条件。 @for挑战给出了一个创建简单网格系统的示例。这也适用于@while 。
$ x：1;
@while $ x <13 {
.col - ＃{$ x} {width：100％/ 12 * $ x;}
$ x：$ x + 1;
}
首先，定义变量$x并将其设置为1.接下来，使用@while指令创建网格系统， 而 $x小于13.在设置width的CSS规则后， $x增加1以避免无限循环。
+
+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指令，当$x小于 13 时创建网格系统 。 +在设置width的 CSS 规则后，$x增加 1 以避免无限循环。 +
## Instructions -
使用@while创建一系列具有不同font-sizes的类。从text-1到text-10应该有10个不同的类。然后将font-size设置为5px乘以当前索引号。确保避免无限循环！
+
+使用@while创建一系列具有不同font-sizes的 class。 +从text-1到text-10应该有 10 个不同的 class。然后将font-size设置为 15px 乘以当前索引号。注意不要写成死循环！ +
## Tests
```yml tests: - - text: 您的代码应使用@while指令。 - testString: 'assert(code.match(/@while /g), "Your code should use the @while directive.");' - - text: 您的代码应将索引变量设置为1才能启动。 - testString: 'assert(code.match(/\$.*:\s*?1;/gi), "Your code should set an index variable to 1 to start.");' - - text: 您的代码应该递增计数器变量。 - testString: 'assert(code.match(/\$(.*):\s*?\$\1\s*?\+\s*?1;/gi), "Your code should increment the counter variable.");' - - text: 您的.text-1类的font-size为5px。 - testString: 'assert($(".text-1").css("font-size") == "5px", "Your .text-1 class should have a font-size of 5px.");' - - text: 您的.text-2类的font-size为10px。 - testString: 'assert($(".text-2").css("font-size") == "10px", "Your .text-2 class should have a font-size of 10px.");' - - text: 您的.text-3类的font-size为15px。 - testString: 'assert($(".text-3").css("font-size") == "15px", "Your .text-3 class should have a font-size of 15px.");' - - text: 您的.text-4类的font-size为20px。 - testString: 'assert($(".text-4").css("font-size") == "20px", "Your .text-4 class should have a font-size of 20px.");' - - text: 您的.text-5类的font-size为25px。 - testString: 'assert($(".text-5").css("font-size") == "25px", "Your .text-5 class should have a font-size of 25px.");' - - text: 您的.text-6类的font-size为30px。 - testString: 'assert($(".text-6").css("font-size") == "30px", "Your .text-6 class should have a font-size of 30px.");' - - text: 您的.text-7类的font-size为35px。 - testString: 'assert($(".text-7").css("font-size") == "35px", "Your .text-7 class should have a font-size of 35px.");' - - text: 您的.text-8类的font-size为40px。 - testString: 'assert($(".text-8").css("font-size") == "40px", "Your .text-8 class should have a font-size of 40px.");' - - text: 您的.text-9类的font-size为45px。 - testString: 'assert($(".text-9").css("font-size") == "45px", "Your .text-9 class should have a font-size of 45px.");' - - text: 您的.text-10类的font-size为50px。 - testString: 'assert($(".text-10").css("font-size") == "50px", "Your .text-10 class should have a font-size of 50px.");' + - text: 你的代码应使用@while指令。 + testString: assert(code.match(/@while /g)); + - text: 你的代码应将索引变量设置为 1 才能启动。 + testString: assert(code.match(/\$.*:\s*?1;/gi)); + - text: 你的代码应该递增计数器变量。 + testString: assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi)); + - text: .text-1class 的font-size应为 15px。 + testString: assert($('.text-1').css('font-size') == '15px'); + - text: .text-2class 的font-size应为 30px。 + testString: assert($('.text-2').css('font-size') == '30px'); + - text: .text-3class 的font-size应为 45px。 + testString: assert($('.text-3').css('font-size') == '45px'); + - text: .text-4class 的font-size应为 60px。 + testString: assert($('.text-4').css('font-size') == '60px'); + - text: .text-5class 的font-size应为 75px。 + testString: assert($('.text-5').css('font-size') == '75px'); ``` @@ -65,25 +72,31 @@ tests:

Hello

Hello

Hello

-

Hello

-

Hello

-

Hello

-

Hello

-

Hello

- ``` - -
## Solution
-```js -// solution required +```html + + +

Hello

+

Hello

+

Hello

+

Hello

+

Hello

``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.chinese.md index c99ce1a7f4..e568b400d2 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.chinese.md @@ -2,32 +2,68 @@ id: 587d7dbd367417b2b2512bb6 title: Create Reusable CSS with Mixins challengeType: 0 -videoUrl: '' -localeTitle: 使用Mixins创建可重用的CSS +forumTopicId: 301455 +localeTitle: 用 Mixins 创建可重用 CSS --- ## Description -
在Sass中， mixin是一组CSS声明，可以在整个样式表中重用。较新的CSS功能需要一段时间才能完全采用并准备好在所有浏览器中使用。随着功能添加到浏览器中，使用它们的CSS规则可能需要供应商前缀。考虑“盒子阴影”：
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的功能。这是如何写一个：
@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指令调用mixin ：
div {
@include box-shadow（0px，0px，4px，＃fff）;
}
+
+在 Sass 中，mixin是一组 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是可选的。 +现在，只要在需要的地方使用@include调用上面定义的mixin，就可以自动添加好所有的浏览器前缀：mixin使用@include指令调用： + +```scss +div { + @include box-shadow(0px, 0px, 4px, #fff); +} +``` + +
## Instructions -
为border-radius写一个mixin并给它一个$radius参数。它应该使用示例中的所有供应商前缀。然后使用border-radius mixin为#awesome元素提供15px的边界半径。
+
+为border-radius写一个mixin，并给它一个$radius参数。它应该使用示例中的所有浏览器前缀，然后使用border-radius mixin为#awesome元素提供 15px 的边框半径。 +
## Tests
```yml tests: - - text: 你的代码应该声明一个名为border-radius的mixin ，它有一个名为$radius的参数。 + - text: 你应声明名为border-radius的mixin，其中包含名为$radius的参数。 testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); - - text: 您的代码应包含使用$radius参数的-webkit-border-radius vender前缀。 + - text: 你应该给$radius添加-webkit-border-radius浏览器前缀。 testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi)); - - text: 您的代码应包含使用$radius参数的-moz-border-radius vender前缀。 + - text: 你应该给$radius添加-moz-border-radius浏览器前缀。 testString: assert(code.match(/-moz-border-radius:\s*?\$radius;/gi)); - - text: 您的代码应包含使用$radius参数的-ms-border-radius vender前缀。 + - text: 你应该给$radius添加-ms-border-radius浏览器前缀。 testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi)); - - text: 您的代码应包含使用$radius参数的一般border-radius规则。 + - text: 你应该给$radius添加border-radius。 testString: assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4); - - text: 您的代码应使用@include关键字调用border-radius mixin ，将其设置为15px。 + - text: 你应使用@include关键字调用border-radius mixin，并将其设置为 15px。 testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi)); ``` @@ -65,8 +101,24 @@ tests: ## Solution
-```js -// solution required +```html + + +
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.chinese.md index d5777539e4..7b94612219 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.chinese.md @@ -2,24 +2,51 @@ id: 587d7fa5367417b2b2512bbd title: Extend One Set of CSS Styles to Another Element challengeType: 0 -videoUrl: '' +forumTopicId: 301456 localeTitle: 将一组CSS样式扩展到另一个元素 --- ## Description -
Sass有一个名为extend的功能，可以很容易地从一个元素中借用CSS规则并在另一个元素上构建它们。例如，下面的CSS规则块会设置一个.panel类。它有background-color ， height和border 。
。面板{
背景颜色：红色;
身高：70px;
边框：2px纯绿色;
}
现在你想要另一个名为.big-panel 。它具有与.panel相同的基本属性，但也需要width和font-size 。可以从.panel复制并粘贴初始CSS规则，但是当您添加更多类型的面板时，代码会变得重复。 extend指令是一种重用为一个元素编写的规则的简单方法，然后为另一个元素添加更多：
。大面板{
@extend .panel;
宽度：150px;
font-size：2em;
}
除了新样式之外， .big-panel还具有与.panel相同的属性。
+
+Sass 有一个名为extend的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。 +例如，下面的 CSS 规则块设置了.panelclass 的样式。它有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的类.info-important ，并将background-color设置为洋红色。
+
+创建一个扩展.info的 class.info-important，并将background-color设置为洋红色。 +
## Tests
```yml tests: - - text: 您的info-important类应该将background-color设置为magenta 。 + - text: info-importantclass 应该将background-color设置为magenta。 testString: assert(code.match(/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi)); - - text: 您的info-important类应使用@extend从info类继承样式。 + - text: info-importantclass 应使用@extend继承infoclass 的样式。 testString: assert(code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi)); ``` @@ -54,7 +81,6 @@ tests:

This is a simple post. It has basic styling and can be extended for other uses.

- ``` @@ -66,8 +92,33 @@ tests: ## Solution
-```js -// solution required +```html + +

Posts

+
+

This is an important post. It should extend the class ".info" and have its own CSS styles.

+
+ +
+

This is a simple post. It has basic styling and can be extended for other uses.

+
+ ``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/nest-css-with-sass.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/nest-css-with-sass.chinese.md index ef738d8021..bca6f8390d 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/nest-css-with-sass.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/nest-css-with-sass.chinese.md @@ -2,22 +2,59 @@ id: 587d7dbd367417b2b2512bb5 title: Nest CSS with Sass challengeType: 0 -videoUrl: '' -localeTitle: 使用Sass嵌套CSS +forumTopicId: 301457 +localeTitle: 用 Sass 嵌套 CSS --- ## Description -
Sass允许nesting CSS规则，这是组织样式表的有用方法。通常，每个元素都定位在不同的行上以对其进行样式设置，如下所示：
nav {
背景颜色：红色;
}

nav ul {
list-style：none;
}

nav ul li {
display：inline-block;
}
对于大型项目，CSS文件将包含许多行和规则。这是nesting可以通过在相应的父元素中放置子样式规则来帮助组织代码的地方：
nav {
背景颜色：红色;

ul {
list-style：none;

li {
display：inline-block;
}
}
}
+
+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 -
使用上面显示的nesting技术为.blog-post元素的两个子元素重新组织CSS规则。出于测试目的， h1应该位于p元素之前。
+
+根据上面关于嵌套的例子，来简化.blog-post中两个子元素的 CSS 代码。出于测试目的，h1应该出现在p元素之前。 +
## Tests
```yml tests: - - text: 您的代码应该重新组织CSS规则，以便h1和p嵌套在.blog-post父元素中。 + - text: 你应重新组织 CSS 规则，以便h1和p嵌套在.blog-post父元素中。 testString: 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)); ``` @@ -47,7 +84,6 @@ tests:

Blog Title

This is a paragraph

- ``` @@ -59,8 +95,23 @@ tests: ## Solution
-```js -// solution required +```html + + +
+

Blog Title

+

This is a paragraph

+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.chinese.md index 03e42e8e1c..be33f7b88e 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.chinese.md @@ -2,22 +2,36 @@ id: 587d7dbf367417b2b2512bbc title: Split Your Styles into Smaller Chunks with Partials challengeType: 0 -videoUrl: '' -localeTitle: 使用Partials将您的样式拆分为较小的块 +forumTopicId: 301459 +localeTitle: 用 Partials 将你的样式分成小块 --- ## Description -
Partials在萨斯是持有的CSS代码段单独的文件。这些是在其他Sass文件中导入和使用的。这是将类似代码分组到模块中以保持组织有效的好方法。 partials名称以下划线（ _ ）字符开头，告诉Sass它是CSS的一小部分，而不是将其转换为CSS文件。此外，Sass文件以.scss文件扩展名结尾。要将partial的代码放入另一个Sass文件中，请使用@import指令。例如，如果所有mixins都保存在名为“_mixins.scss”的partial ，并且在“main.scss”文件中需要它们，则这是在主文件中使用它们的方法：
//在main.scss文件中

@import'commpins'
请注意， import语句中不需要下划线 - Sass理解它是partial 。将partial导入文件后，可以使用所有变量， mixins和其他代码。
+
+Sass 中的Partials是包含 CSS 代码段的单独文件。这些是在其他 Sass 文件中导入和使用的。我们可以把类似代码放到模块中，以保持代码结构规整且易于管理。 +partials的名称以下划线（_）字符开头，告诉 Sass 它是 CSS 的一小部分，而不是将其转换为 CSS 文件。此外，Sass 文件以.scss文件扩展名结尾。要将partial中的代码放入另一个 Sass 文件中，请使用@import指令。 +例如，如果所有mixins都保存在名为 "_mixins.scss " 的partial中，并且在"main.scss "文件中需要它们，这是如何在主文件中使用它们： + +```scss +// In the main.scss file + +@import 'mixins' +``` + +请注意，import语句中不需要下划线——Sass 知道它是partial。将partial导入文件后，可以使用所有变量mixins和其他代码。 +
## Instructions -
编写@import语句，将名为_variables.scss的partial导入main.scss文件。
+
+编写@import语句，将名为_variables.scss的partial导入 main.scss 文件。 +
## Tests
```yml tests: - - text: 您的代码应使用@import指令，并且不应在文件名中包含下划线。 + - text: 你的代码应使用@import指令，并且不应在文件名中包含下划线。 testString: assert(code.match(/@import\s+?('|")variables\1/gi)); ``` @@ -32,6 +46,9 @@ tests: ```html // The main.scss file + + + ``` @@ -43,8 +60,9 @@ tests: ## Solution
-```js -// solution required +```html +// The main.scss file +@import 'variables' ``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/store-data-with-sass-variables.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/store-data-with-sass-variables.chinese.md index 67b7c0739a..485415e434 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/store-data-with-sass-variables.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/store-data-with-sass-variables.chinese.md @@ -2,28 +2,47 @@ id: 587d7dbd367417b2b2512bb4 title: Store Data with Sass Variables challengeType: 0 -videoUrl: '' -localeTitle: 使用Sass变量存储数据 +forumTopicId: 301460 +localeTitle: 用 Sass 变量存储数据 --- ## Description -
Sass的一个与CSS不同的特性是它使用变量。它们被声明并设置为存储数据，类似于JavaScript。在JavaScript中，使用let和const关键字定义变量。在Sass中，变量以$开头，后跟变量名。以下是几个例子：
$ main-fonts：Arial，sans-serif;
$ headings-color：green;

//使用变量：
h1 {
font-family：$ main-fonts;
颜色：$ headings-color;
}
变量有用的一个例子是当许多元素需要是相同的颜色时。如果更改了该颜色，则编辑代码的唯一位置是变量值。
+
+Sass 不同于 CSS 的一个特点是它允许使用变量。我们可以在 Sass 中声明变量，并为它赋值，就像我们在 JavaScript 中一样。 +在 JavaScript 中，变量是使用let和const关键字定义的。在 Sass 中，变量以$开头的，后跟变量名。 +这里有几个例子： + +```scss +$main-fonts: Arial, sans-serif; +$headings-color: green; + +//To use variables: +h1 { + font-family: $main-fonts; + color: $headings-color; +} +``` + +当需要把多个元素设置成相同颜色时，变量就会很有用。一旦我们需要更改颜色，只需要改变这个变量的值就好。 +
## Instructions -
创建一个变量$text-color并将其设置为红色。然后将.blog-post和h2的color属性值更改为$text-color变量。
+
+创建一个变量$text-color并将其设置为红色。然后更改.blog-post和h2的color属性的值为$text-color变量。 +
## Tests
```yml tests: - - text: 您的代码应该具有为$text-color声明的Sass变量，其值为red。 + - text: 你应该为$text-color声明一个值为红色的 Sass 变量。 testString: assert(code.match(/\$text-color:\s*?red;/g)); - - text: 您的代码应使用$text-color变量来更改.blog-post和h2项的color 。 + - text: 你应使用$text-color变量来更改.blog-post和h2的颜色。 testString: assert(code.match(/color:\s*?\$text-color;/g)); - - text: 您的.blog-post元素应该是红色。 + - text: .blog-post元素应为红色。 testString: assert($('.blog-post').css('color') == 'rgb(255, 0, 0)'); - - text: 你的h2元素应该是红色。 + - text: h2元素应为红色。 testString: assert($('h2').css('color') == 'rgb(255, 0, 0)'); ``` @@ -60,7 +79,6 @@ tests:

Here is another header

Even more random text within a paragraph

- ``` @@ -72,8 +90,31 @@ tests: ## Solution
-```js -// solution required +```html + + +

Learn Sass

+
+

Some random title

+

This is a paragraph with some random text in it

+
+
+

Header #2

+

Here is some more random text.

+
+
+

Here is another header

+

Even more random text within a paragraph

+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.chinese.md index 794c760a88..1744aa6cc4 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.chinese.md @@ -2,28 +2,70 @@ id: 587d7dbf367417b2b2512bba title: Use @each to Map Over Items in a List challengeType: 0 -videoUrl: '' -localeTitle: 使用@each映射列表中的项目 +forumTopicId: 301461 +localeTitle: 使用 @each 遍历列表中的项目 --- ## Description -
最后一个挑战显示了@for指令如何使用起始值和结束值循环一定次数。 Sass还提供了@each指令，它循环遍历列表或映射中的每个项目。在每次迭代时，变量将从列表或映射分配给当前值。
@each $颜色为蓝色，红色，绿色{
。＃{$ color} -text {color：$ color;}
}
地图的语法略有不同。这是一个例子：
$ colors：（color1：blue，color2：red，color3：green）;

@each $ key，$ colors in colors {
。＃{$ color} -text {color：$ color;}
}
请注意，需要$key变量来引用地图中的键。否则，编译后的CSS将有color1 ， color2 ...在里面。以上两个代码示例都转换为以下CSS：
.blue-text {
颜色：蓝色;
}

.red-text {
红色;
}

.green-text {
颜色：绿色;
}
+
+ +最后一个挑战显示了@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列表的@each指令： blue, black, red ，并将每个变量分配给.color-bg类，其中“颜色”部分为每个项目更改。每个类应该将background-color设置为相应的颜色。
+
+ +编写一个@each指令，通过一个列表：blue,black,red并将每个变量分配给.color-bgclass, 其中每个项目的“颜色”部分都会发生变化。 +每个 class 都应该将background-color设置为相应的颜色。 +
## Tests
```yml tests: - - text: 您的代码应该使用@each指令。 + - text: 你的代码应使用@each指令。 testString: assert(code.match(/@each /g)); - - text: 您的.blue-bg类应该具有蓝色的background-color 。 + - text: .blue-bgclass 背景色应为蓝色。 testString: assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)'); - - text: 你的.black-bg类的background-color为黑色。 + - text: .black-bgclass 背景色应为黑色。 testString: assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)'); - - text: 您的.red-bg类应该具有红色的background-color 。 + - text: .red-bgclass 背景色应为红色。 testString: assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)'); ``` @@ -49,20 +91,57 @@ tests:
- ``` - -
## Solution
-```js -// solution required +The solution requires using the $color variable twice: once for the class name and once for setting the background color. You can use either the list or map data type. + +### List Data type + +```html + + +
+
+
``` -/section> +### Map Data type + +```html + + +
+
+
+``` + +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.chinese.md index a4c87cbce6..538f8645ac 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.chinese.md @@ -2,32 +2,65 @@ id: 587d7dbe367417b2b2512bb9 title: Use @for to Create a Sass Loop challengeType: 0 -videoUrl: '' -localeTitle: 使用@for创建Sass循环 +forumTopicId: 301462 +localeTitle: 使用 @for 创建一个 Sass 循环 --- ## Description -
@for指令在循环中添加样式，非常类似于JavaScript中的for循环。 @for以两种方式使用：“ @for ”或“ @for ”。主要区别在于“从头到尾” 排除了结束号码，“从头到尾” 包括结束号码。这是一个开始到最后的例子：
@for $ i从1到12 {
.col - ＃{$ i} {width：100％/ 12 * $ i; }
}
#{$i}部分是将变量（ i ）与文本组合成字符串的语法。当Sass文件转换为CSS时，它看起来像这样：
.col-1 {
宽度：8.33333％;
}

.col-2 {
宽度：16.66667％;
}

...

.col-12 {
宽度：100％;
}
这是创建网格布局的有效方法。现在，您有12个可用作CSS类的列宽选项。
+
+你可以在 Sass 中使用@for循环，它的表现类似与 JavaScript 中的for循环。 +@for以两种方式使用："start through end" 或 "start to end"。主要区别在于“开始结束” 排除 结束号码，而“开始结束” 包括 结束号码。 +这是一个开始 到 结束示例： + +```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 classes 的列宽选项。 +
## Instructions -
写一个@for指令，它接受一个从1 到 6的变量$j 。它应该创建5个名为.text-1到.text-5 ，其中每个类的font-size设置为10px乘以索引。
+
+编写@for指令，使$j的值为从 1（包含）到 6（不包含）。 +它应该创建 5 个名为.text-1的 classes 到.text-5，其中每个 class 的font-size设置为 15px 乘以索引。 +
## Tests
```yml tests: - - text: 您的代码应使用@for指令。 + - text: 你应使用@for指令。 testString: assert(code.match(/@for /g)); - - text: 您的.text-1类的font-size为10px。 + - text: .text-1class 的font-size应为 15px。 testString: assert($('.text-1').css('font-size') == '15px'); - - text: 您的.text-2类的font-size为20px。 + - text: .text-2class 的font-size应为 30px。 testString: assert($('.text-2').css('font-size') == '30px'); - - text: 您的.text-3类的font-size为30px。 + - text: .text-3class 的font-size应为 45px。 testString: assert($('.text-3').css('font-size') == '45px'); - - text: 您的.text-4类的font-size为40px。 + - text: .text-4class 的font-size应为 60px。 testString: assert($('.text-4').css('font-size') == '60px'); - - text: 您的.text-5类的font-size为50px。 + - text: .text-5class 的font-size应为 75px。 testString: assert($('.text-5').css('font-size') == '75px'); ``` @@ -51,7 +84,6 @@ tests:

Hello

Hello

Hello

- ``` @@ -63,8 +95,35 @@ tests: ## Solution
-```js -// solution required +```html + + +

Hello

+

Hello

+

Hello

+

Hello

+

Hello

``` -/section> +```html + + +

Hello

+

Hello

+

Hello

+

Hello

+

Hello

+``` +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.chinese.md index 74177795b5..9aa7a75746 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.chinese.md @@ -2,17 +2,54 @@ id: 587d7dbe367417b2b2512bb8 title: Use @if and @else to Add Logic To Your Styles challengeType: 0 -videoUrl: '' -localeTitle: 使用@if和@else将逻辑添加到您的样式 +forumTopicId: 301463 +localeTitle: 使用 @if 和 @else 为你的样式添加逻辑 --- ## Description -
Sass中的@if指令对于测试特定情况很有用 - 它就像JavaScript中的if语句一样。
@mixin make-bold（$ bool）{
@if $ bool == true {
font-weight：bold;
}
}
就像在JavaScript中一样， @else if和@else测试更多条件：
@mixin text-effect（$ val）{
@if $ val == danger {
红色;
}
@else if $ val == alert {
颜色：黄色;
}
@else if $ val == success {
颜色：绿色;
}
@else {
颜色：黑色;
}
}
+
+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检查以下条件： -
光 - 1px纯黑色
中等 - 3px纯黑色
重 - 6px纯黑色
-如果$val不是light，medium，或者heavy，则边框应该设置为none。 +
+创建一个名为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。
## Tests @@ -20,15 +57,15 @@ localeTitle: 使用@if和@else将逻辑添加到您的样式 ```yml tests: - - text: 你的代码应该声明一个名为border-stroke的mixin ，它有一个名为$val的参数。 + - text: 你应该声明一个名为border-stroke的mixin，它有一个名为$val的参数。 testString: assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi)); - - text: 你的mixin应该有一个@if语句来检查$val是否很亮，并将border设置为1px纯黑色。 + - text: mixin应该有一个@if语句来检查$val是否很轻，并将border设置为 1px 纯黑色。 testString: assert(code.match(/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi)); - - text: 你的mixin应该有一个@else if语句来检查$val是否为中等，并将border设置为3px纯黑色。 + - text: mixin应该有一个@else if语句来检查$val是否中等，并设置border为3px 纯黑色。 testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi)); - - text: 你的mixin应该有一个@else if语句来检查$val是否很重，并将border设置为6px纯黑色。 + - text: mixin应该有一个@else if语句来检查$val是否很重，并设置border为6px 纯黑色。 testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi)); - - text: 你的mixin应该有一个@else语句来设置border为none。 + - text: mixin应该有一个@else语句来将border设置为 none。 testString: assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi)); ``` @@ -54,7 +91,6 @@ tests:
- ``` @@ -66,8 +102,33 @@ tests: ## Solution
-```js -// solution required +```html + + +
``` -/section> +