chore(i18n,learn): processed translations (#41387)
* chore(i8n,learn): processed translations * fix: remove extra space Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@@ -21,13 +21,13 @@ CSS 的 class 具有可重用性，可应用于各种 HTML 元素。
|
||||
</style>
|
||||
```
|
||||
|
||||
可以看到，我们在 `<style>` 样式声明区域里，创建了一个名为 `blue-text` 的 `class` 选择器。 你可以将一个 class 添加到一个 HTML 元素里，如下所示：`<h2 class="blue-text">CatPhotoApp</h2>`。注意在 CSS `style` 里，class 名称以一个句点开始。 而在 HTML 元素的 class 属性中，名称前面没有句点。
|
||||
可以看到，我们在 `<style>` 样式声明区域里，创建了一个名为 `blue-text` 的 `class` 选择器。 你可以这样将 class 应用于 HTML 元素：`<h2 class="blue-text">CatPhotoApp</h2>`。 注意在 CSS `style` 元素里，class 名以一个句点开头。 在 HTML 元素的 class 属性中，class 名的开头没有句点。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `style` 样式声明里，把 `h2` 元素选择器改为 `.red-text` class 选择器，同时将颜色 `blue` 改为 `red`。
|
||||
|
||||
把 `h2` 元素的 `class` 属性值设置为 `'red-text'`。
|
||||
给 `h2` 元素设置一个值为 `red-text` 的 `class` 属性。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ dashedName: multiply-two-decimals-with-javascript
|
||||
assert(product === 5.0);
|
||||
```
|
||||
|
||||
要使用`*`运算符。
|
||||
要使用 `*` 运算符。
|
||||
|
||||
```js
|
||||
assert(/\*/.test(code));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Build a Random Quote Machine
|
||||
title: 构建一个随机引语生成器
|
||||
challengeType: 3
|
||||
forumTopicId: 301374
|
||||
dashedName: build-a-random-quote-machine
|
||||
@@ -8,39 +8,39 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/qRZeGZ> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 可以根据自己的喜好来美化 app。
|
||||
|
||||
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复使用推荐技术栈遇到的反馈问题。 编码愉快！
|
||||
|
||||
**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`.
|
||||
**需求 1：** 应该能看到一个具有 `id="quote-box"` 属性的包裹元素。
|
||||
|
||||
**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`.
|
||||
**需求 2：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="text"` 属性的元素。
|
||||
|
||||
**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`.
|
||||
**需求 3：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="author"` 属性的元素。
|
||||
|
||||
**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`.
|
||||
**需求 4：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="new-quote"` 属性的可点击元素。
|
||||
|
||||
**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`.
|
||||
**需求 5：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="tweet-quote"` 属性的可点击 `a` 元素。
|
||||
|
||||
**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`.
|
||||
**需求 6：** 首次加载时，App 应该在具有 `id="text"` 属性的元素内展示一条随机引语。
|
||||
|
||||
**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`.
|
||||
**需求 7：** 首次加载时，App 应该在具有 `id="author"` 属性的元素内展示该条随机引语的作者。
|
||||
|
||||
**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element.
|
||||
**需求 8：** 当点击具有 `#new-quote` 属性的按钮时，App 应该得到一条新的引语并在具有 `#text` 属性的元素内展示出来。
|
||||
|
||||
**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element.
|
||||
**需求 9：** 当点击具有 `#new-quote` 属性的按钮时，App 应该得到新引语的作者并在具有 `#author` 属性的元素内展示出来。
|
||||
|
||||
**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote``a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote.
|
||||
**需求 10：** 可以通过点击具有 `#tweet-quote` 属性的 `a` 标签将当前引语发送到推特。 该 `a` 标签的 `href` 属性应该是 `"twitter.com/intent/tweet"`，以便成功发送。
|
||||
|
||||
**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.
|
||||
**需求 11：** 具有 `#quote-box` 属性的包裹元素应该水平居中。 请在浏览器缩放尺寸为 100% 且页面窗口最大化时运行测试。
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved.
|
||||
**注意：** Twitter 不允许在 iframe 里加载链接。 如果 tweet 不能加载，尝试在 `#tweet-quote` 元素上使用 `target="_blank"` 或者 `target="_top"` 属性。 `target="_top"` 会替换当前 tab 页的内容，所以确保当前内容已经保存了。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036159
|
||||
title: Use the Spread Operator on Arrays
|
||||
title: 在数组中使用扩展运算符
|
||||
challengeType: 6
|
||||
forumTopicId: 301452
|
||||
dashedName: use-the-spread-operator-on-arrays
|
||||
@@ -8,19 +8,19 @@ dashedName: use-the-spread-operator-on-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
One solution from ES6 to help enforce state immutability in Redux is the spread operator: `...`. The spread operator has a variety of applications, one of which is well-suited to the previous challenge of producing a new array from an existing array. This is relatively new, but commonly used syntax. For example, if you have an array `myArray` and write:
|
||||
ES6 中有助于在 Redux 中强制执行状态不变性的一个解决方案是扩展运算符：`...`。 扩展运算符具有很多的应用，其中一种非常适合通过一个已有的数组生成一个新数组。 这是相对较新的但常用的语法。 例如，如果你有一个数组 `myArray` 并写：
|
||||
|
||||
`let newArray = [...myArray];`
|
||||
|
||||
`newArray` is now a clone of `myArray`. Both arrays still exist separately in memory. If you perform a mutation like `newArray.push(5)`, `myArray` doesn't change. The `...` effectively *spreads* out the values in `myArray` into a new array. To clone an array but add additional values in the new array, you could write `[...myArray, 'new value']`. This would return a new array composed of the values in `myArray` and the string `'new value'` as the last value. The spread syntax can be used multiple times in array composition like this, but it's important to note that it only makes a shallow copy of the array. That is to say, it only provides immutable array operations for one-dimensional arrays.
|
||||
`newArray` 现在是 `myArray` 的克隆。 两个数组仍然在内存中单独存在。 如果你执行像 `newArray.push(5)` 这样的代码，`myArray` 不会改变。 `...` 有效将 `myArray` 中的值 *展开*到一个新数组中。 要克隆数组但在新数组中添加其他值，可以编写 `[...myArray, 'new value']`。 这将返回一个由 `myArray` 中的值和字符串 `new value` （作为最后一个值）组成的新数组。 扩展语法可以像这样在数组组合中多次使用，但重要的是要注意它只做一个浅拷贝。 这就是说，它只为一维数组提供了不可变的数组操作。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the spread operator to return a new copy of state when a to-do is added.
|
||||
添加待办事项时，使用 spread 运算符返回新的状态副本。
|
||||
|
||||
# --hints--
|
||||
|
||||
The Redux store should exist and initialize with a state equal to `[Do not mutate state!]`.
|
||||
Redux store 应该在代码编辑器中存在并使用 `["Do not mutate state!"]` 进行状态初始化。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -34,13 +34,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`addToDo` and `immutableReducer` both should be functions.
|
||||
`addToDo`和`immutableReducer`都应该是一个函数。
|
||||
|
||||
```js
|
||||
assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
|
||||
```
|
||||
|
||||
Dispatching an action of type `ADD_TO_DO` on the Redux store should add a `todo` item and should NOT mutate state.
|
||||
在 Redux store 上 dispatch 一个类型为`ADD_TO_DO` aciton 应该添加一个`todo`项，并且不应该改变 state。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -55,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The spread operator should be used to return new state.
|
||||
应使用扩展运算符返回新的 state。
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').includes('...state'));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036157
|
||||
title: Write a Counter with Redux
|
||||
title: 用 Redux 写一个计数器
|
||||
challengeType: 6
|
||||
forumTopicId: 301453
|
||||
dashedName: write-a-counter-with-redux
|
||||
@@ -8,33 +8,33 @@ dashedName: write-a-counter-with-redux
|
||||
|
||||
# --description--
|
||||
|
||||
Now you've learned all the core principles of Redux! You've seen how to create actions and action creators, create a Redux store, dispatch your actions against the store, and design state updates with pure reducers. You've even seen how to manage complex state with reducer composition and handle asynchronous actions. These examples are simplistic, but these concepts are the core principles of Redux. If you understand them well, you're ready to start building your own Redux app. The next challenges cover some of the details regarding `state` immutability, but first, here's a review of everything you've learned so far.
|
||||
现在已经了解了 Redux 的所有核心原则！ 已经了解了如何创建 action 和 action creator，创建 Redux store，通过 store dispatch action，以及使用纯粹的 reducer 设计状态更新。 甚至已经看到过如何使用 reducer 组合管理复杂状态并处理异步操作。 这些例子很简单，但这些概念是 Redux 的核心原则。 如果已经理解这些，那么就可以开始构建自己的 Redux 应用了。 接下来的挑战包括关于 `state` 不变性的一些细节，但是，这里是对到目前为止学到的所有内容的回顾。
|
||||
|
||||
# --instructions--
|
||||
|
||||
In this lesson, you'll implement a simple counter with Redux from scratch. The basics are provided in the code editor, but you'll have to fill in the details! Use the names that are provided and define `incAction` and `decAction` action creators, the `counterReducer()`, `INCREMENT` and `DECREMENT` action types, and finally the Redux `store`. Once you're finished you should be able to dispatch `INCREMENT` or `DECREMENT` actions to increment or decrement the state held in the `store`. Good luck building your first Redux app!
|
||||
在本课程中，将从头开始使用 Redux 实现一个简单的计数器。 基本知识在代码编辑器中提供，但你必须完成细节！ 使用提供的名称定义 `incAction` 和 `decAction` action creator，`counterReducer()`，`INCREMENT`和`DECREMENT` action 类型，以及 Redux `store`。 一旦完成，应该能够 dispatch `INCREMENT` 或 `DECREMENT` 动作来增加或减少 `store` 中保存的状态。 开始构建你的第一个 Redux 应用程序吧，编码愉快！
|
||||
|
||||
# --hints--
|
||||
|
||||
The action creator `incAction` should return an action object with `type` equal to the value of `INCREMENT`
|
||||
action creator `incAction` 应该返回一个 `type` 等于 `INCREMENT` 的 action 对象。
|
||||
|
||||
```js
|
||||
assert(incAction().type === INCREMENT);
|
||||
```
|
||||
|
||||
The action creator `decAction` should return an action object with `type` equal to the value of `DECREMENT`
|
||||
action creator `decAction` 应该返回一个 `type` 等于 `DECREMENT` 的 action 对象。
|
||||
|
||||
```js
|
||||
assert(decAction().type === DECREMENT);
|
||||
```
|
||||
|
||||
The Redux store should initialize with a `state` of 0.
|
||||
Redux store 应该将 `state` 初始化为 0。
|
||||
|
||||
```js
|
||||
assert(store.getState() === 0);
|
||||
```
|
||||
|
||||
Dispatching `incAction` on the Redux store should increment the `state` by 1.
|
||||
在 Redux store 上 dispatch `incAction` 应该将 `state` 增加 1。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching `decAction` on the Redux store should decrement the `state` by 1.
|
||||
在 Redux store 上 dispatch `decAction` 应该将 `state` 减少 1。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`counterReducer` should be a function
|
||||
`counterReducer` 必须是一个函数。
|
||||
|
||||
```js
|
||||
assert(typeof counterReducer === 'function');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
title: 使用 @while 循环创建样式
|
||||
challengeType: 0
|
||||
forumTopicId: 301454
|
||||
dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
@@ -8,9 +8,9 @@ dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
|
||||
# --description--
|
||||
|
||||
The `@while` directive is an option with similar functionality to the JavaScript `while` loop. It creates CSS rules until a condition is met.
|
||||
Sass 中的 `@while` 指令与 JavaScript 中的 `while` 类似。 只要满足条件，它就会一直创建 CSS 代码。
|
||||
|
||||
The `@for` challenge gave an example to create a simple grid system. This can also work with `@while`.
|
||||
`@for` 挑战提供了一个创建简单网格系统的示例。 用 `@while` 也可以实现。
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@@ -20,59 +20,59 @@ $x: 1;
|
||||
}
|
||||
```
|
||||
|
||||
First, define a variable `$x` and set it to 1. Next, use the `@while` directive to create the grid system *while* `$x` is less than 13. After setting the CSS rule for `width`, `$x` is incremented by 1 to avoid an infinite loop.
|
||||
首先，定义变量 `$x` 并将其设置为 1。 接下来，使用 `@while` 指令，*while* `$x` 小于 13 时创建网格系统 。 在设置 `width` 的 CSS 规则后，`$x` 增加 1 以避免无限循环。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use `@while` to create a series of classes with different `font-sizes`.
|
||||
使用 `@while` 创建一系列具有不同 `font-sizes` 的 class。
|
||||
|
||||
There should be 5 different classes from `text-1` to `text-5`. Then set `font-size` to `15px` multiplied by the current index number. Make sure to avoid an infinite loop!
|
||||
从 `text-1` 到 `text-5` 应该有 5 个不同的 class。 然后将 `font-size` 设置为 `15px` 乘以当前索引号。 注意不要写成死循环！
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@while` directive.
|
||||
代码应使用 `@while` 指令。
|
||||
|
||||
```js
|
||||
assert(code.match(/@while /g));
|
||||
```
|
||||
|
||||
Your code should use an index variable which starts at an index of 1.
|
||||
代码应将开始索引变量设置为 1 。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$.*:\s*?1;/gi));
|
||||
```
|
||||
|
||||
Your code should increment the counter variable.
|
||||
代码应该递增计数器变量。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
|
||||
```
|
||||
|
||||
Your `.text-1` class should have a `font-size` of 15px.
|
||||
`.text-1` class 的 `font-size` 应为 `15px`。
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Your `.text-2` class should have a `font-size` of 30px.
|
||||
`.text-2` class 的 `font-size` 应为 `30px`。
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Your `.text-3` class should have a `font-size` of 45px.
|
||||
`.text-3` class 的 `font-size` 应为 `45px`。
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Your `.text-4` class should have a `font-size` of 60px.
|
||||
`.text-4` class 的 `font-size` 应为 `60px`。
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Your `.text-5` class should have a `font-size` of 75px.
|
||||
`.text-5` class 的 `font-size` 应为 `75px`。
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
title: 用 Mixins 创建可重用 CSS
|
||||
challengeType: 0
|
||||
forumTopicId: 301455
|
||||
dashedName: create-reusable-css-with-mixins
|
||||
@@ -8,9 +8,9 @@ dashedName: create-reusable-css-with-mixins
|
||||
|
||||
# --description--
|
||||
|
||||
In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet.
|
||||
在 Sass 中，<dfn>mixin</dfn> 是一组 CSS 声明，可以在整个样式表中重复使用。
|
||||
|
||||
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":
|
||||
CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。 随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。 考虑 `box-shadow`：
|
||||
|
||||
```scss
|
||||
div {
|
||||
@@ -21,7 +21,7 @@ div {
|
||||
}
|
||||
```
|
||||
|
||||
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 的函数。 以下是一个例子：
|
||||
|
||||
```scss
|
||||
@mixin box-shadow($x, $y, $blur, $c){
|
||||
@@ -32,7 +32,7 @@ It's a lot of typing to re-write this rule for all the elements that have a `box
|
||||
}
|
||||
```
|
||||
|
||||
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` 指令调用。
|
||||
|
||||
```scss
|
||||
div {
|
||||
@@ -42,17 +42,17 @@ div {
|
||||
|
||||
# --instructions--
|
||||
|
||||
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` 的边框半径。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-radius` which has a parameter named `$radius`.
|
||||
应声明名为 `border-radius` 的 mixin，其中包含名为 `$radius` 的参数。
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
应该给 `$radius` 添加 `-webkit-border-radius` 浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
应该给 `$radius` 添加 `-moz-border-radius` 浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -68,13 +68,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
应该给 `$radius` 添加 `-ms-border-radius` 浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
```
|
||||
|
||||
Your code should include the general `border-radius` rule that uses the `$radius` parameter.
|
||||
应该给 `$radius` 添加 `border-radius`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -83,7 +83,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `border-radius mixin` using the `@include` keyword, setting it to 15px.
|
||||
应使用 `@include` 关键字调用 `border-radius mixin`，并将其设置为 `15px`。
|
||||
|
||||
```js
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
title: 将一组 CSS 样式扩展到另一个元素
|
||||
challengeType: 0
|
||||
forumTopicId: 301456
|
||||
dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
@@ -8,9 +8,9 @@ dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sass has a feature called `extend` that makes it easy to borrow the CSS rules from one element and build upon them in another.
|
||||
Sass 有一个名为 `extend` 的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
|
||||
|
||||
For example, the below block of CSS rules style a `.panel` class. It has a `background-color`, `height` and `border`.
|
||||
例如，下面的 CSS 规则块设置了 `.panel` class 的样式。 它有 `background-color`，`height` 和 `border`。
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
@@ -20,7 +20,7 @@ For example, the below block of CSS rules style a `.panel` class. It has a `back
|
||||
}
|
||||
```
|
||||
|
||||
Now you want another panel called `.big-panel`. It has the same base properties as `.panel`, but also needs a `width` and `font-size`. It's possible to copy and paste the initial CSS rules from `.panel`, but the code becomes repetitive as you add more types of panels. The `extend` directive is a simple way to reuse the rules written for one element, then add more for another:
|
||||
现在需要另一个名为 `.big-panel` 的面板。 它具有与 `.panel` 相同的基本属性，但还需要 `width` 和 `font-size`。 可以从 `.panel` 复制并粘贴初始 CSS 规则，但是当添加更多类型的面板时，代码会变得重复。 `extend` 指令是一种重用为一个元素编写的规则的简单方法，可以为另一个元素重用并添加更多规则：
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@@ -30,15 +30,15 @@ Now you want another panel called `.big-panel`. It has the same base properties
|
||||
}
|
||||
```
|
||||
|
||||
The `.big-panel` will have the same properties as `.panel` in addition to the new styles.
|
||||
除了新样式之外，`.big-panel` 将具有与 `.panel` 相同的属性。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make a class `.info-important` that extends `.info` and also has a `background-color` set to magenta.
|
||||
创建一个扩展 `.info` 的 class `.info-important`，并将`background-color` 设置为洋红色（magenta）。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `info-important` class should have a `background-color` set to `magenta`.
|
||||
`info-important` class 应该将 `background-color` 设置为 `magenta`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `info-important` class should use `@extend` to inherit the styling from the `info` class.
|
||||
`info-important` class 应使用 `@extend` 继承 `info` class 的样式。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
title: 用 Sass 嵌套 CSS
|
||||
challengeType: 0
|
||||
forumTopicId: 301457
|
||||
dashedName: nest-css-with-sass
|
||||
@@ -8,9 +8,9 @@ dashedName: nest-css-with-sass
|
||||
|
||||
# --description--
|
||||
|
||||
Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.
|
||||
Sass 允许 CSS 规则的嵌套，这在组织样式表的时候会很有用。
|
||||
|
||||
Normally, each element is targeted on a different line to style it, like so:
|
||||
在 CSS 里，每个元素的样式都需要写在独立的代码块中，如下所示：
|
||||
|
||||
```scss
|
||||
nav {
|
||||
@@ -26,7 +26,7 @@ nav ul li {
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
对于一个大型项目，CSS 规则会很复杂。 这时，引入嵌套功能（即在对应的父元素中写子元素的样式）可以有效地简化代码：
|
||||
|
||||
```scss
|
||||
nav {
|
||||
@@ -45,11 +45,11 @@ nav {
|
||||
|
||||
# --instructions--
|
||||
|
||||
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.
|
||||
根据上面关于嵌套的例子，来简化 `.blog-post` 中两个子元素的 CSS 代码。 为了通过测试，`h1` 应该出现在 `p` 元素之前。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should re-organize the CSS rules so the `h1` and `p` are nested in the `.blog-post` parent element.
|
||||
应重新组织 CSS 规则，以便 `h1` 和 `p` 嵌套在 `.blog-post` 父元素中。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
title: 用 Partials 将样式分成小块
|
||||
challengeType: 0
|
||||
forumTopicId: 301459
|
||||
dashedName: split-your-styles-into-smaller-chunks-with-partials
|
||||
@@ -8,27 +8,25 @@ dashedName: split-your-styles-into-smaller-chunks-with-partials
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>Partials</dfn> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.
|
||||
Sass 中的 <dfn>Partials</dfn> 是包含 CSS 代码段的单独的文件。 这些片段可以导入其它 Sass 文件使用。 可以把类似代码放到模块中，以保持代码结构规整且易于管理。
|
||||
|
||||
Names for partials start with the underscore (`_`) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the `.scss` file extension. To bring the code in the partial into another Sass file, use the `@import` directive.
|
||||
partials 的名称以下划线（`_`）字符开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。 此外，Sass 文件以 `.scss` 文件扩展名结尾。 要将 partial 中的代码放入另一个 Sass 文件中，使用 `@import` 指令。
|
||||
|
||||
For example, if all your mixins are saved in a partial named "\_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:
|
||||
例如，如果所有 mixins 都保存在名为 “\_mixins.scss” 的 partial 中，并且在 “main.scss” 文件中需要它们，下面是使用方法：
|
||||
|
||||
```scss
|
||||
// In the main.scss file
|
||||
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
Note that the underscore and file extension are not needed in the `import` statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use.
|
||||
请注意，`import` 语句中不需要下划线——Sass 知道它是 partial。 将 partial 导入文件后，可以使用所有变量、mixins 和其它代码。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write an `@import` statement to import a partial named `_variables.scss` into the main.scss file.
|
||||
编写 `@import` 语句，将名为 `_variables.scss` 的 partial 导入 main.scss 文件。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@import` directive, and should not include the underscore in the file name.
|
||||
代码应使用 `@import` 指令，并且不应在文件名中包含下划线。
|
||||
|
||||
```js
|
||||
assert(code.match(/@import\s+?('|")variables\1/gi));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
title: 用 Sass 变量存储数据
|
||||
challengeType: 0
|
||||
forumTopicId: 301460
|
||||
dashedName: store-data-with-sass-variables
|
||||
@@ -8,50 +8,53 @@ dashedName: store-data-with-sass-variables
|
||||
|
||||
# --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.
|
||||
Sass 不同于 CSS 的一个特点是它允许使用变量。 可以在 Sass 中声明变量，并为它赋值，就像在 JavaScript 中一样。
|
||||
|
||||
In JavaScript, variables are defined using the `let` and `const` keywords. In Sass, variables start with a `$` followed by the variable name.
|
||||
在 JavaScript 中，变量是使用 `let` 和 `const` 关键字定义的。 在 Sass 中，变量以 `$` 开头的，后跟变量名。
|
||||
|
||||
Here are a couple examples:
|
||||
这里有几个例子：
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
```
|
||||
|
||||
//To use variables:
|
||||
并使用变量：
|
||||
|
||||
```scss
|
||||
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.
|
||||
当需要把多个元素设置成相同颜色时，变量就会很有用。 一旦需要更改颜色，只需要改变这个变量的值就好。
|
||||
|
||||
# --instructions--
|
||||
|
||||
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` 并将其设置为 `red`。 然后更改 `.blog-post` 和 `h2` 的 `color` 属性的值为 `$text-color` 变量。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a Sass variable declared for `$text-color` with a value of red.
|
||||
应该把 `$text-color` 声明一个值为 `red` 的 Sass 变量。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color:\s*?red;/g));
|
||||
```
|
||||
|
||||
Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items.
|
||||
应使用 `$text-color` 变量来更改 `.blog-post` 和 `h2` 的 `color`。
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?\$text-color;/g));
|
||||
```
|
||||
|
||||
Your `.blog-post` element should have a `color` of red.
|
||||
`.blog-post` 元素 `color` 应为红色。
|
||||
|
||||
```js
|
||||
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `h2` elements should have a `color` of red.
|
||||
`h2` 元素的 `color` 应为红色。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(255, 0, 0)');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
title: 使用 @each 遍历列表中的项目
|
||||
challengeType: 0
|
||||
forumTopicId: 301461
|
||||
dashedName: use-each-to-map-over-items-in-a-list
|
||||
@@ -8,7 +8,7 @@ dashedName: use-each-to-map-over-items-in-a-list
|
||||
|
||||
# --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` 指令，该指令循环遍历列表或映射中的每个项目。 在每次迭代时，变量将从列表或映射分配给当前值。
|
||||
|
||||
```scss
|
||||
@each $color in blue, red, green {
|
||||
@@ -16,7 +16,7 @@ The last challenge showed how the `@for` directive uses a starting and ending va
|
||||
}
|
||||
```
|
||||
|
||||
A map has slightly different syntax. Here's an example:
|
||||
map 的语法略有不同。 这是一个例子：
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
@@ -26,7 +26,7 @@ $colors: (color1: blue, color2: red, color3: green);
|
||||
}
|
||||
```
|
||||
|
||||
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：
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
@@ -44,29 +44,29 @@ Note that the `$key` variable is needed to reference the keys in the map. Otherw
|
||||
|
||||
# --instructions--
|
||||
|
||||
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` ，将每个变量分配给 class 为`.color-bg` 的项目，使每个项目的 `color` 都不一样。 每个 class 都应该将 `background-color` 设置为相应的颜色。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@each` directive.
|
||||
代码应使用 `@each` 指令。
|
||||
|
||||
```js
|
||||
assert(code.match(/@each /g));
|
||||
```
|
||||
|
||||
Your `.blue-bg` class should have a `background-color` of blue.
|
||||
`.blue-bg` class 的 `background-color` 应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Your `.black-bg` class should have a `background-color` of black.
|
||||
`.black-bg` class 的 `background-color` 应为黑色。
|
||||
|
||||
```js
|
||||
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.red-bg` class should have a `background-color` of red.
|
||||
`.red-bg` class 的 `background-color` 应为红色。
|
||||
|
||||
```js
|
||||
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
title: 使用 @for 创建一个 Sass 循环
|
||||
challengeType: 0
|
||||
forumTopicId: 301462
|
||||
dashedName: use-for-to-create-a-sass-loop
|
||||
@@ -8,11 +8,11 @@ dashedName: use-for-to-create-a-sass-loop
|
||||
|
||||
# --description--
|
||||
|
||||
The `@for` directive adds styles in a loop, very similar to a `for` loop in JavaScript.
|
||||
可以在 Sass 中使用 `@for` 循环添加样式，它的用法和 JavaScript 中的 `for` 循环类似。
|
||||
|
||||
`@for` is used in two ways: "start through end" or "start to end". The main difference is that the "start **to** end" *excludes* the end number as part of the count, and "start **through** end" *includes* the end number as part of the count.
|
||||
`@for` 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始 **to** 结束”*不包括*结束数字，而“开始 **through** 结束”*包括* 结束号码。
|
||||
|
||||
Here's a start **through** end example:
|
||||
这是一个开始 **through** 结束的示例：
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 12 {
|
||||
@@ -20,7 +20,7 @@ Here's a start **through** end example:
|
||||
}
|
||||
```
|
||||
|
||||
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 时，它看起来像这样：
|
||||
|
||||
```scss
|
||||
.col-1 {
|
||||
@@ -38,47 +38,47 @@ The `#{$i}` part is the syntax to combine a variable (`i`) with text to make a s
|
||||
}
|
||||
```
|
||||
|
||||
This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.
|
||||
这是创建网格布局的有效方法。 现在，有了 12 个可用作 CSS class 的列宽选项。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a `@for` directive that takes a variable `$j` that goes from 1 **to** 6.
|
||||
编写 `@for` 指令，使 `$j` 的值为从 1 到 **to** 6。
|
||||
|
||||
It should create 5 classes called `.text-1` to `.text-5` where each has a `font-size` set to 15px multiplied by the index.
|
||||
它应该创建 5 个名为 `.text-1` 到 `.text-5` 的 class，其中每个 class 的 `font-size` 设置为 15px 乘以索引。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@for` directive.
|
||||
应使用 `@for` 指令。
|
||||
|
||||
```js
|
||||
assert(code.match(/@for /g));
|
||||
```
|
||||
|
||||
Your `.text-1` class should have a `font-size` of 15px.
|
||||
`.text-1` class 的 `font-size` 应为 15px。
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Your `.text-2` class should have a `font-size` of 30px.
|
||||
`.text-2` class 的 `font-size` 应为 30px。
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Your `.text-3` class should have a `font-size` of 45px.
|
||||
`.text-3` class 的 `font-size` 应为 45px。
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Your `.text-4` class should have a `font-size` of 60px.
|
||||
`.text-4` class 的 `font-size` 应为 60px。
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Your `.text-5` class should have a `font-size` of 75px.
|
||||
`.text-5` class 的 `font-size` 应为 75px。
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
title: 使用 @if 和 @else 为样式添加逻辑
|
||||
challengeType: 0
|
||||
forumTopicId: 301463
|
||||
dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
@@ -8,7 +8,7 @@ dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
|
||||
# --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` 语句类似。
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@@ -18,7 +18,7 @@ The `@if` directive in Sass is useful to test for a specific case - it works jus
|
||||
}
|
||||
```
|
||||
|
||||
And just like in JavaScript, `@else if` and `@else` test for more conditions:
|
||||
类似 JavaScript，可以在 Sass 中使用 `@else if` 和 `@else` 测试更多条件：
|
||||
|
||||
```scss
|
||||
@mixin text-effect($val) {
|
||||
@@ -39,7 +39,7 @@ And just like in JavaScript, `@else if` and `@else` test for more conditions:
|
||||
|
||||
# --instructions--
|
||||
|
||||
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` 检查以下条件：
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
@@ -47,17 +47,17 @@ medium - 3px solid black
|
||||
heavy - 6px solid black
|
||||
```
|
||||
|
||||
If `$val` is not `light`, `medium`, or `heavy`, the border should be set to `none`.
|
||||
如果 `$val` 不是 `light`、`medium` 或者 `heavy`，border 应该设置为 `none`。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-stroke` which has a parameter named `$val`.
|
||||
应该声明一个名为 `border-stroke` 的 mixin，它有一个名为 `$val` 的参数。
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\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.
|
||||
mixin 应该有一个 `@if` 语句来检查 `$val` 是否等于 `light`，并将 `border` 设置为 `1px solid black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else if` statement to check if `$val` is medium, and to set the `border` to 3px solid black.
|
||||
mixin 应该有一个 `@else if` 语句来检查 `$val` 是否等于 `medium`，并设置 `border` 为 `3px solid black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else if` statement to check if `$val` is heavy, and to set the `border` to 6px solid black.
|
||||
mixin 应该有一个 `@else if` 语句来检查 `$val` 是否等于 `heavy`，并设置 `border` 为 `3px solid black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -87,7 +87,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else` statement to set the `border` to none.
|
||||
mixin 应该有一个 `@else` 语句来将 `border` 设置为 `none`。
|
||||
|
||||
```js
|
||||
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
|
||||
Reference in New Issue
Block a user