fix(i18n): update Chinese translation of sass (#38595)

Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>

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
-<section id="description"> Sass允许<code>nesting</code> CSS规则，这是组织样式表的有用方法。通常，每个元素都定位在不同的行上以对其进行样式设置，如下所示： <blockquote> nav { <br>背景颜色：红色; <br> } <br><br> nav ul { <br> list-style：none; <br> } <br><br> nav ul li { <br> display：inline-block; <br> } </blockquote>对于大型项目，CSS文件将包含许多行和规则。这是<code>nesting</code>可以通过在相应的父元素中放置子样式规则来帮助组织代码的地方： <blockquote> nav { <br>背景颜色：红色; <br><br> ul { <br> list-style：none; <br><br> li { <br> display：inline-block; <br> } <br> } <br> } <br></blockquote></section>
+<section id='description'>
+Sass 允许 CSS 规则的<code>嵌套</code>，这在写样式表的时候会很有用。
+在 CSS 里，每个元素的样式都需要写在独立的代码块中，如下所示：
+
+```scss
+nav {
+  background-color: red;
+}
+
+nav ul {
+  list-style: none;
+}
+
+nav ul li {
+  display: inline-block;
+}
+```
+
+对于一个大型项目，CSS 规则会很复杂。这时，引入<code>嵌套</code>功能（即在对应的父元素中写子元素的样式）可以有效地简化代码：
+
+```scss
+nav {
+  background-color: red;
+
+  ul {
+    list-style: none;
+
+    li {
+      display: inline-block;
+    }
+  }
+}
+
+```
+
+</section>
 
 ## Instructions
-<section id="instructions">使用上面显示的<code>nesting</code>技术为<code>.blog-post</code>元素的两个子元素重新组织CSS规则。出于测试目的， <code>h1</code>应该位于<code>p</code>元素之前。 </section>
+<section id='instructions'>
+根据上面关于嵌套的例子，来简化<code>.blog-post<code>中两个子元素的 CSS 代码。出于测试目的，<code>h1</code>应该出现在<code>p</code>元素之前。
+</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 您的代码应该重新组织CSS规则，以便<code>h1</code>和<code>p</code>嵌套在<code>.blog-post</code>父元素中。
+  - 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));
 
 ```
@@ -47,7 +84,6 @@ tests:
   <h1>Blog Title</h1>
   <p>This is a paragraph</p>
 </div>
-
 ```
 
 </div>
@@ -59,8 +95,23 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style type='text/sass'>
+  .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>
 ```
 
-/section>
+</section>