first translate

03-front-end-libraries/sass.json

@@ -6,38 +6,38 @@
   "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",
           "raw": true
         }
       ],
       "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 <code>let</code> and <code>const</code> keywords. In Sass, variables start with a <code>$</code> followed by the variable name.",
-        "Here are a couple examples:",
+        “Sass不同于CSS的一个特点是它使用变量。 类似于JavaScript，它们被声明并设置为存储数据”，
+        “在JavaScript中， 变量是使用<code>let</code> 和 <code>const</code> 关键字定义的。 在 Sass 中，变量以 <code>$</code> 开头的，后跟变量名”，
+        “这里有几个例子”，
         "<blockquote>$main-fonts: Arial, sans-serif;<br>$headings-color: green;<br><br>//To use variables:<br>h1 {<br>&nbsp;&nbsp;font-family: $main-fonts;<br>&nbsp;&nbsp;color: $headings-color;<br>}</blockquote>",
-        "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.",
+        “变量有用的一个示例是当多个元素需要设置相同的颜色时，如果要更改颜色，只需要改变变量值”，
         "<hr>",
-        "Create a variable <code>$text-color</code> and set it to red. Then change the value of the <code>color</code> property for the <code>.blog-post</code> and <code>h2</code> to the <code>$text-color</code> variable."
+        “创建一个变量<code> $ text-color </ code>并将其设置为红色。然后更改<code> .blog-post </ code>的<code> color </ code>属性的值， <code> h2 </ code>到<code> $ text-color </ code>变量。”
       ],
       "tests": [
         {
-          "text": "Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.",
-          "testString": "assert(code.match(/\\$text-color:\\s*?red;/g), 'Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.');"
+          “text”：“您的代码应该为<code> $ text-color </ code>声明一个值为红色的Sass变量。”，
+          “testString”：“assert（code.match（/ \\ $ text-color：\\ s *？red; / g），'您的代码应该为<code> $ text-color </ code声明一个Sass变量 >值为红色。'）;”
         },
         {
-          "text": "Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.",
-          "testString": "assert(code.match(/color:\\s*?\\$text-color;/g), 'Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.');"
+          “text”：“您的代码应使用<code> $ text-color </ code>变量来更改<code> .blog-post </ code>和<code>的<code> color </ code> h2 </ code>项目。“，
+           “testString”：“assert（code.match（/ color：\\ s *？\\ $ text-color; / g），'你的代码应该使用<code> $ text-color </ code>变量来改变 <code> .blog-post </ code>和<code> h2 </ code> items的<code> color </ code>。'）;“
         },
         {
-          "text": "Your <code>.blog-post</code> element should have a </code>color</code> of red.",
-          "testString": "assert($('.blog-post').css('color') == 'rgb(255, 0, 0)', 'Your <code>.blog-post</code> element should have a </code>color</code> of red.');"
+          “text”：“您的<code> .blog-post </ code>元素应该具有红色的</ code>颜色</ code>。”，
+           “testString”：“assert（$（'。blog-post'）。css（'color'）=='rgb（255,0,0）'，'Your <code> .blog-post </ code>元素 应该有一个红色的</ code>颜色</ code>。'）;“
         },
         {
-          "text": "Your <code>h2</code> elements should have a </code>color</code> of red.",
-          "testString": "assert($('h2').css('color') == 'rgb(255, 0, 0)', 'Your <code>h2</code> elements should have a </code>color</code> of red.');"
+          “text”：“您的<code> h2 </ code>元素应该具有红色的</ code>颜色</ code>。”，
+           “testString”：“assert（$（'h2'）。css（'color'）=='rgb（255,0,0）'，'你的<code> h2 </ code>元素应该有一个</ code >颜色</ code> of red。'）;“
         }
       ],
       "solutions": [],
@@ -90,18 +90,24 @@
         }
       ],
       "description": [
-        "Sass allows <code>nesting</code> 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:",
-        "<blockquote>nav {<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>nav ul {<br>&nbsp;&nbsp;list-style: none;<br>}<br><br>nav ul li {<br>&nbsp;&nbsp;display: inline-block;<br>}</blockquote>",
-        "For a large project, the CSS file will have many lines and rules. This is where <code>nesting</code> can help organize your code by placing child style rules within the respective parent elements:",
-        "<blockquote>nav {<br>&nbsp;&nbsp;background-color: red;<br><br>&nbsp;&nbsp;ul {<br>&nbsp;&nbsp;&nbsp;&nbsp;list-style: none;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;li {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: inline-block;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>}<br></blockquote>",
-        "<hr>",
-        "Use the <code>nesting</code> technique shown above to re-organize the CSS rules for both children of <code>.blog-post</code> element. For testing purposes, the <code>h1</code> should come before the <code>p</code> element."
+        “Sass允许CSS规则的<code>嵌套</ code>，这是组织样式表的有用方法。”，
+        “通常情况下，每个元素都针对不同的线条进行设计，如下所示：”，
+        “<blockquote> nav {<br>＆nbsp;＆nbsp; background-color：red; <br>
+        } <br> <br> nav ul {<br>＆nbsp;＆nbsp; list-style：none; <br>
+        } < br> <br> nav ul li {<br>＆nbsp;＆nbsp; display：inline-block; <br>
+        } </ blockquote>“，
+        “对于一个大型项目，CSS文件将有许多行和规则。这就是<code> nesting </ code>可以通过在相应的父元素中放置子样式规则来帮助组织代码：”，
+        “<blockquote> nav {<br>＆nbsp;＆nbsp; background-color：red; <br> <br>＆nbsp;＆nbsp; ul {<br>＆nbsp;＆nbsp;＆nbsp;＆nbsp; list-style：none; <br > <br>＆nbsp;＆nbsp;＆nbsp;＆nbsp; li {<br>＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp; display：inline-block; <br>＆nbsp;＆nbsp;＆nbsp;＆nbsp;
+                } <br> ＆NBSP;＆NBSP;
+            }
+        }搜索结果</ BLOCKQUOTE>”，
+        “<HR>”，
+        “使用上面显示的<code> nesting </code>技术为<code>.blog-post </ code>元素的两个子元素重新组织CSS规则。出于测试目的，<code> h1 </ code >应该出现在<code> p </ code>元素之前。”
       ],
       "tests": [
         {
-          "text": "Your code should re-organize the CSS rules so the <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> 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 <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> parent element.');"
+          "text": “您的代码应重新组织CSS规则，以便<code>h1</code>和<code>p</ code>嵌套在<code>.blog-post</code>父元素中。”,
+          "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规则，以便<code>h1</code>和<code>p</code>嵌套在<code> .blog-post </code>父元素中。);"
         }
       ],
       "solutions": [],
@@ -647,4 +653,4 @@
       }
     }
   ]
-}
+}