diff --git a/03-front-end-libraries/sass.json b/03-front-end-libraries/sass.json
index 639056f..69b40ef 100644
--- a/03-front-end-libraries/sass.json
+++ b/03-front-end-libraries/sass.json
@@ -6,7 +6,7 @@
"challenges": [
{
"id": "587d7dbd367417b2b2512bb4",
- "title": "Store Data with Sass Variables",
+ "title": "使用 Sass 变量储存数据",
"required": [
{
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
@@ -14,30 +14,30 @@
}
],
"description": [
- "One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.",
- "In JavaScript, variables are defined using the let and const keywords. In Sass, variables start with a $ followed by the variable name.",
- "Here are a couple examples:",
+ "Sass 不同于 CSS 的一个特点是它使用变量。 类似于 JavaScript，声明变量并赋值存储在内存中。",
+ "在 JavaScript 中， 变量是使用 let 和 const 关键字定义的。 在 Sass 中，变量以 $ 开头的，后跟变量名",
+ "这里有几个例子",
"$main-fonts: Arial, sans-serif;
$headings-color: green;
//To use variables:
h1 {
font-family: $main-fonts;
color: $headings-color;
}
",
- "One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.",
+ "变量有用的一个示例是当多个元素需要设置相同的颜色时，如果要更改颜色，只需要改变变量值",
"
",
- "Create a variable $text-color and set it to red. Then change the value of the color property for the .blog-post and h2 to the $text-color variable."
+ "创建一个变量 $text-color 并将其设置为红色。然后更改 .blog-post 的 color 属性的值， h2 到 $text-color 变量。"
],
"tests": [
{
- "text": "Your code should have a Sass variable declared for $text-color with a value of red.",
- "testString": "assert(code.match(/\\$text-color:\\s*?red;/g), 'Your code should have a Sass variable declared for $text-color with a value of red.');"
+ "text": "你的代码应该为 $text-color 声明一个值为红色的 Sass 变量。",
+ "testString" "assert(code.match(/\\$text-color:\\s*?red;/g), '你的代码应该为 $text-color 声明一个 Sass 变量，其值为 red。');"
},
{
- "text": "Your code should use the $text-color variable to change the color for the .blog-post and h2 items.",
- "testString": "assert(code.match(/color:\\s*?\\$text-color;/g), 'Your code should use the $text-color variable to change the color for the .blog-post and h2 items.');"
+ "text": "你的代码应使用 $text-color 变量来更改 .blog-post 和 h2 的 颜色 。",
+ "testString" "assert(code.match(/color:\\s*?\\$text-color;/g), '你的代码应使用 $text-color 变量来更改 .blog-post 和 h2 的 颜色 。');"
},
{
- "text": "Your .blog-post element should have a color of red.",
- "testString": "assert($('.blog-post').css('color') == 'rgb(255, 0, 0)', 'Your .blog-post element should have a color of red.');"
+ "text": "你的 .blog-post 元素应该具有红色的 颜色 。",
+ "testString" "assert($('.blog-post').css('color') == 'rgb(255, 0, 0)', '你的代码应使用 $text-color 变量来更改 .blog-post 和 h2 的 颜色 。');"
},
{
- "text": "Your h2 elements should have a color of red.",
- "testString": "assert($('h2').css('color') == 'rgb(255, 0, 0)', 'Your h2 elements should have a color of red.');"
+ "text": "你的 h2 元素应该具有红色的 颜色 。",
+ "testString" "assert($('h2').css('color') == 'rgb(255, 0, 0)', '你的 h2 元素应该具有红色的 颜色 。');"
}
],
"solutions": [],
@@ -82,7 +82,7 @@
},
{
"id": "587d7dbd367417b2b2512bb5",
- "title": "Nest CSS with Sass",
+ "title": "使用 Sass 嵌套CSS",
"required": [
{
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
@@ -90,18 +90,18 @@
}
],
"description": [
- "Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.",
- "Normally, each element is targeted on a different line to style it, like so:",
- "nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
",
- "For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:",
- "nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
",
- "
",
- "Use the nesting technique shown above to re-organize the CSS rules for both children of .blog-post element. For testing purposes, the h1 should come before the p element."
+ "Sass 允许 CSS 规则的 嵌套 ，这是组织样式表的有用方法。",
+ "通常情况下，每个元素都针对不同的线条进行设计，如下所示：",
+ "nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
",
+ "对于一个大型项目，CSS 文件将有许多行和规则。这就是 嵌套 可以通过在相应的父元素中放置子样式规则来帮助组织代码：",
+ "nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
",
+ "
",
+ "使用上面显示的 nesting 技术为 .blog-post 元素的两个子元素重新组织 CSS 规则。出于测试目的，h1 应该出现在 p 元素之前。"
],
"tests": [
{
- "text": "Your code should re-organize the CSS rules so the h1 and p are nested in the .blog-post parent element.",
- "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), 'Your code should re-organize the CSS rules so the h1 and p are nested in the .blog-post parent element.');"
+ "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), '你的代码应重新组织 CSS 规则，以便 h1 和 p 嵌套在 .blog-post 父元素中。);"
}
],
"solutions": [],
@@ -139,7 +139,7 @@
},
{
"id": "587d7dbd367417b2b2512bb6",
- "title": "Create Reusable CSS with Mixins",
+ "title": "使用 Mixins 创建可重用的CSS",
"required": [
{
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
@@ -147,42 +147,42 @@
}
],
"description": [
- "In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet.",
- "Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider \"box-shadow\":",
+ "在 Sass 中，mixin 是一组 CSS 声明，可以在整个样式表中重复使用。",
+ "较新的 CSS 功能需要一段时间适配所有浏览器后才能完全使用。随着浏览器的不断升级，使用它们的 CSS 规则可能需要供应商前缀。考虑\"box-shadow\":",
"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;
}
",
- "It's a lot of typing to re-write this rule for all the elements that have a box-shadow, or to change each value to test different effects.",
- "Mixins are like functions for CSS. Here is how to write one:",
+ "对于所有具有 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;
}
",
- "The definition starts with @mixin followed by a custom name. The parameters (the $x, $y, $blur, and $c in the example above) are optional.",
- "Now any time a box-shadow rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the @include directive:",
+ "定义以 @mixin 开头，后跟自定义名称。参数（$x，$y，$blur，以及上例中的 $c 是可选的。",
+ "现在，只要需要 box-shadow 规则，只需要调用 mixin 的一行代替必须输入所有供应商前缀。mixin 使用 @include 指令调用：",
"div {
@include box-shadow(0px, 0px, 4px, #fff);
}
",
"
",
- "Write a mixin for border-radius and give it a $radius parameter. It should use all the vendor prefixes from the example. Then use the border-radius mixin to give the #awesome element a border radius of 15px."
+ "为 border-radius 写一个 mixin，并给它一个 $radius 参数。它应该使用示例中的所有供应商前缀。然后使用 border-radius mixin 为 #awesome 元素提供15px的边框半径。"
],
"tests": [
{
- "text": "Your code should declare a mixin named border-radius which has a parameter named $radius.",
- "testString": "assert(code.match(/@mixin\\s+?border-radius\\s*?\\(\\s*?\\$radius\\s*?\\)\\s*?{/gi), 'Your code should declare a mixin named border-radius which has a parameter named $radius.');"
+ "text": "你的代码应声明名为 border-radius 的 mixin，其中包含名为 $radius 的参数。",
+ "testString": "assert(code.match(/@mixin\\s+?border-radius\\s*?\\(\\s*?\\$radius\\s*?\\)\\s*?{/gi), '你的代码应声明名为 border-radius 的 mixin，其中包含名为 $radius 的参数。');"
},
{
- "text": "Your code should include the -webkit-border-radius vender prefix that uses the $radius parameter.",
- "testString": "assert(code.match(/-webkit-border-radius:\\s*?\\$radius;/gi), 'Your code should include the -webkit-border-radius vender prefix that uses the $radius parameter.');"
+ "text": "你的代码应包含使用 $radius 参数的 -webkit-border-radius 供应商前缀。",
+ "testString": "assert(code.match(/-webkit-border-radius:\\s*?\\$radius;/gi), '你的代码应包含使用 $radius 参数的 -webkit-border-radius 供应商前缀。');"
},
{
- "text": "Your code should include the -moz-border-radius vender prefix that uses the $radius parameter.",
- "testString": "assert(code.match(/-moz-border-radius:\\s*?\\$radius;/gi), 'Your code should include the -moz-border-radius vender prefix that uses the $radius parameter.');"
+ "text": "你的代码应包含使用 $radius 参数的 -moz-border-radius 供应商前缀。",
+ "testString": "assert(code.match(/-moz-border-radius:\\s*?\\$radius;/gi), '你的代码应包含使用 $radius 参数的 -moz-border-radius 供应商前缀。');"
},
{
- "text": "Your code should include the -ms-border-radius vender prefix that uses the $radius parameter.",
- "testString": "assert(code.match(/-ms-border-radius:\\s*?\\$radius;/gi), 'Your code should include the -ms-border-radius vender prefix that uses the $radius parameter.');"
+ "text": "你的代码应包含使用 $radius 参数的 -ms-border-radius 供应商前缀。",
+ "testString": "assert(code.match(/-ms-border-radius:\\s*?\\$radius;/gi), '你的代码应包含使用 $radius 参数的 -ms-border-radius 供应商前缀。');"
},
{
- "text": "Your code should include the general border-radius rule that uses the $radius parameter.",
- "testString": "assert(code.match(/border-radius:\\s*?\\$radius;/gi).length == 4, 'Your code should include the general border-radius rule that uses the $radius parameter.');"
+ "text": "你的代码应包含使用 $radius 参数的常规 border-radius 规则。",
+ "testString": "assert(code.match(/border-radius:\\s*?\\$radius;/gi).length == 4, '你的代码应包含使用 $radius 参数的常规 border-radius 规则。');"
},
{
- "text": "Your code should call the border-radius mixin using the @include keyword, setting it to 15px.",
- "testString": "assert(code.match(/@include\\s+?border-radius\\(\\s*?15px\\s*?\\);/gi), 'Your code should call the border-radius mixin using the @include keyword, setting it to 15px.');"
+ "text": "你的代码应使用 @include 关键字调用 border-radius mixin，并将其设置为15px。",
+ "testString": "assert(code.match(/@include\\s+?border-radius\\(\\s*?15px\\s*?\\);/gi), '你的代码应使用 @include 关键字调用 border-radius mixin，并将其设置为15px。');"
}
],
"solutions": [],
@@ -217,7 +217,7 @@
},
{
"id": "587d7dbe367417b2b2512bb8",
- "title": "Use @if and @else to Add Logic To Your Styles",
+ "title": "使用@if和@else将逻辑添加到你的样式",
"required": [
{
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
@@ -225,34 +225,34 @@
}
],
"description": [
- "The @if directive in Sass is useful to test for a specific case - it works just like the if statement in JavaScript.",
+ "Sass中的 @if 指令对于测试特定情况非常有用 - 它的工作方式与JavaScript 中的 if 语句类似。",
"@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
",
- "And just like in JavaScript, @else if and @else test for more conditions:",
+ "就像在 JavaScript 中一样，@else if 和 @else 测试更多条件：",
"@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
",
"
",
- "Create a mixin called border-stroke that takes a parameter $val. The mixin should check for the following conditions using @if, @else if, and @else:",
+ "创建一个名为 border-stroke 的 mixin，它接受一个参数 $val。 mixin 应使用 @if，@else if 和 @else 检查以下条件：",
"light - 1px solid black
medium - 3px solid black
heavy - 6px solid black
none - no border
"
],
"tests": [
{
- "text": "Your code should declare a mixin named border-stroke which has a parameter named $val.",
- "testString": "assert(code.match(/@mixin\\s+?border-stroke\\s*?\\(\\s*?\\$val\\s*?\\)\\s*?{/gi), 'Your code should declare a mixin named border-stroke which has a parameter named $val.');"
+ "text": "你的代码应该声明一个名为 border-stroke 的 mixin，它有一个名为 $val 的参数。",
+ "testString": "assert(code.match(/@mixin\\s+?border-stroke\\s*?\\(\\s*?\\$val\\s*?\\)\\s*?{/gi), '你的代码应该声明一个名为 border-stroke 的 mixin，它有一个名为 $val 的参数。');"
},
{
- "text": "Your mixin should have an @if statement to check if $val is light, and to set the border to 1px solid black.",
- "testString": "assert(code.match(/@if\\s+?\\$val\\s*?===?\\s*?light\\s*?{\\s*?border\\s*?:\\s*?1px\\s+?solid\\s+?black\\s*?;\\s*?}/gi), 'Your mixin should have an @if statement to check if $val is light, and to set the border to 1px solid black.');"
+ "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), '你的 mixin 应该有一个 @if 语句来检查 $val 是否很轻，并将 border 设置为 1px纯黑色。');"
},
{
- "text": "Your mixin should have an @else if statement to check if $val is medium, and to set the border to 3px solid black.",
- "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), 'Your mixin should have an @else if statement to check if $val is medium, and to set the border to 3px solid black.');"
+ "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), '你的 mixin 应该有一个 @else if 语句来检查 $val 是否中等，并设置 border 为3px纯黑色。');"
},
{
- "text": "Your mixin should have an @else if statement to check if $val is heavy, and to set the border to 6px solid black.",
- "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), 'Your mixin should have an @else if statement to check if $val is heavy, and to set the border to 6px solid black.');"
+ "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), '你的 mixin 应该有一个 @else if 语句来检查 $val 是否很重，并设置 border 为6px纯黑色。');"
},
{
- "text": "Your mixin should have an @else statement to set the border to none.",
- "testString": "assert(code.match(/@else\\s*?{\\s*?border\\s*?:\\s*?none\\s*?;\\s*?}/gi), 'Your mixin should have an @else statement to set the border to none.');"
+ "text": "你的 mixin 应该有一个 @else 语句来将 border 设置为none。",
+ "testString": "assert(code.match(/@else\\s*?{\\s*?border\\s*?:\\s*?none\\s*?;\\s*?}/gi), '你的 mixin 应该有一个 @else 语句来将 border 设置为none。');"
}
],
"solutions": [],
@@ -286,7 +286,7 @@
},
{
"id": "587d7dbe367417b2b2512bb9",
- "title": "Use @for to Create a Sass Loop",
+ "title": "使用@for创建Sass循环",
"required": [
{
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
@@ -294,41 +294,41 @@
}
],
"description": [
- "The @for directive adds styles in a loop, very similar to a for loop in JavaScript.",
- "@for is used in two ways: \"start through end\" or \"start to end\". The main difference is that \"start to end\" excludes the end number, and \"start through end\" includes the end number.",
- "Here's a start through end example:",
+ "非常类似于JavaScript中的 for 循环，@for 指令在循环中添加样式。",
+ "@for 以两种方式使用：\"start through end \"或\"start to end \"。 主要区别在于“开始结束” 排除 结束号码，而“开始结束” 包括 结束号码。",
+ "这是一个开始 到 结束示例：",
"@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
",
- "The #{$i} part is the syntax to combine a variable (i) with text to make a string. When the Sass file is converted to CSS, it looks like this:",
+ "#{$i} 部分是将变量（i）与文本组合成字符串的语法。 当Sass文件转换为CSS时，它看起来像这样：",
".col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}
",
- "This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.",
+ "这是创建网格布局的有效方法。 现在，你有12个可用作CSS类的列宽选项。",
"
",
- "Write a @for directive that takes a variable $j that goes from 1 to 6.",
- "It should create 5 classes called .text-1 to .text-5 where each has a font-size set to 10px multiplied by the index."
+ "编写 @for 指令，该指令采用从 到 6的变量 $j。",
+ "它应该创建5个名为 .text-1 的类到 .text-5，其中每个类的 font-size 设置为10px乘以索引。"
],
"tests": [
{
- "text": "Your code should use the @for directive.",
- "testString": "assert(code.match(/@for /g), 'Your code should use the @for directive.');"
+ "text": "你的代码应使用 @for 指令。",
+ "testString": "assert(code.match(/@for /g), '你的代码应使用 @for 指令。');"
},
{
- "text": "Your .text-1 class should have a font-size of 10px.",
- "testString": "assert($('.text-1').css('font-size') == '10px', 'Your .text-1 class should have a font-size of 10px.');"
+ "text": "你的 .text-1 类的 font-size 应为10px。",
+ "testString": "assert($('.text-1').css('font-size') == '10px', '你的 .text-1 类的 font-size 应为10px。');"
},
{
- "text": "Your .text-2 class should have a font-size of 20px.",
- "testString": "assert($('.text-2').css('font-size') == '20px', 'Your .text-2 class should have a font-size of 20px.');"
+ "text": "你的 .text-2 类的 font-size 应为20px。",
+ "testString": "assert($('.text-2').css('font-size') == '20px', '你的 .text-2 类的 font-size 应为20px。');"
},
{
- "text": "Your .text-3 class should have a font-size of 30px.",
- "testString": "assert($('.text-3').css('font-size') == '30px', 'Your .text-3 class should have a font-size of 30px.');"
+ "text": "你的 .text-3 类的 font-size 应为30px。",
+ "testString": "assert($('.text-3').css('font-size') == '30px', '你的 .text-3 类的 font-size 应为30px。');"
},
{
- "text": "Your .text-4 class should have a font-size of 40px.",
- "testString": "assert($('.text-4').css('font-size') == '40px', 'Your .text-4 class should have a font-size of 40px.');"
+ "text": "你的 .text-4 类的 font-size 应为40px。",
+ "testString": "assert($('.text-4').css('font-size') == '40px', '你的 .text-4 类的 font-size 应为40px。');"
},
{
- "text": "Your .text-5 class should have a font-size of 50px.",
- "testString": "assert($('.text-5').css('font-size') == '50px', 'Your .text-5 class should have a font-size of 50px.');"
+ "text": "你的 .text-5 类的 font-size 应为50px。",
+ "testString": "assert($('.text-5').css('font-size') == '50px', '你的 .text-5 类的 font-size 应为50px。');"
}
],
"solutions": [],
@@ -360,7 +360,7 @@
},
{
"id": "587d7dbf367417b2b2512bba",
- "title": "Use @each to Map Over Items in a List",
+ "title": "使用@each映射列表中的项目",
"required": [
{
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
@@ -368,34 +368,34 @@
}
],
"description": [
- "The last challenge showed how the @for directive uses a starting and ending value to loop a certain number of times. Sass also offers the @each directive which loops over each item in a list or map.",
- "On each iteration, the variable gets assigned to the current value from the list or map.",
+ "最后一个挑战显示了 @for 指令如何使用起始值和结束值循环一定次数。 Sass还提供 @each 指令，该指令循环遍历列表或映射中的每个项目。",
+ "在每次迭代时，变量将从列表或映射分配给当前值。",
"@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
",
- "A map has slightly different syntax. Here's an example:",
+ "map 的语法略有不同。 这是一个例子：",
"$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
",
- "Note that the $key variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have color1, color2... in it.",
- "Both of the above code examples are converted into the following CSS:",
+ "请注意，需要 $key 变量来引用 map 中的键。 否则，编译后的CSS将包含 color1，color2 ...",
+ "以上两个代码示例都转换为以下CSS：",
".blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
",
"
",
- "Write an @each directive that goes through a list: blue, black, red and assigns each variable to a .color-bg class, where the \"color\" part changes for each item.",
- "Each class should set the background-color the respective color."
+ "编写一个 @each 指令，通过一个列表：blue，black，red 并将每个变量分配给 .color-bg 类，其中 每个项目的“颜色”部分都会发生变化。",
+ "每个类都应该将 background-color 设置为相应的颜色。"
],
"tests": [
{
- "text": "Your code should use the @each directive.",
- "testString": "assert(code.match(/@each /g), 'Your code should use the @each directive.');"
+ "text": "你的代码应使用 @each 指令。",
+ "testString": "assert(code.match(/@each /g), '你的代码应使用 @each 指令。');"
},
{
- "text": "Your .blue-bg class should have a background-color of blue.",
- "testString": "assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'Your .blue-bg class should have a background-color of blue.');"
+ "text": "你的 .blue-bg 类应该具有蓝色的 background-color。",
+ "testString": "assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)', '你的 .blue-bg 类应该具有蓝色的 background-color。');"
},
{
- "text": "Your .black-bg class should have a background-color of black.",
- "testString": "assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)', 'Your .black-bg class should have a background-color of black.');"
+ "text": "你的 .black-bg 类应该具有黑色的 background-color。",
+ "testString": "assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)', '你的 .black-bg 类应该具有黑色的 background-color。');"
},
{
- "text": "Your .red-bg class should have a background-color of red.",
- "testString": "assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)', 'Your .red-bg class should have a background-color of red.');"
+ "text": "你的 .red-bg 类应该具有红色的 background-color。",
+ "testString": "assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)', '你的 .red-bg 类应该具有红色的 background-color。');"
}
],
"solutions": [],
@@ -647,4 +647,4 @@
}
}
]
-}
\ No newline at end of file
+}