Sass

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变量，其值为red。');"
         },
         {
-          "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>h2</code> 的 <code> 颜色 </code>。"，
+           "testString" "assert(code.match(/color:\\s*?\\$text-color;/g), '您的代码应使用 <code>$text-color</code> 变量来更改 <code>.blog-post</code> 和 <code>h2</code> 的 <code> 颜色 </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)', '您的代码应使用 <code>$text-color</code> 变量来更改 <code>.blog-post</code> 和 <code>h2</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>。');"
         }
       ],
       "solutions": [],
@@ -90,18 +90,18 @@
         }
       ],
       "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;}<br>}<br></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 +647,4 @@
       }
     }
   ]
-}
+}