@while指令是一个与JavaScript while循环具有类似功能的选项。它会创建CSS规则，直到满足条件。 @for挑战给出了一个创建简单网格系统的示例。这也适用于@while 。 $ x：1;首先，定义变量
@while $ x <13 {
.col - ＃{$ x} {width：100％/ 12 * $ x;}
$ x：$ x + 1;
}
$x并将其设置为1.接下来，使用@while指令创建网格系统， 而 $x小于13.在设置width的CSS规则后， $x增加1以避免无限循环。 @while指令与 JavaScript 中的while类似。只要满足条件，它就会一直创建 CSS 代码。
+@for挑战提供了一个创建简单网格系统的示例。这也适用于@while。
+
+```scss
+$x: 1;
+@while $x < 13 {
+ .col-#{$x} { width: 100%/12 * $x;}
+ $x: $x + 1;
+}
+```
+
+首先，定义变量$x并将其设置为 1。接下来，使用@while指令，当$x小于 13 时创建网格系统 。
+在设置width的 CSS 规则后，$x增加 1 以避免无限循环。
+@while创建一系列具有不同font-sizes的类。从text-1到text-10应该有10个不同的类。然后将font-size设置为5px乘以当前索引号。确保避免无限循环！ @while创建一系列具有不同font-sizes的 class。
+从text-1到text-10应该有 10 个不同的 class。然后将font-size设置为 15px 乘以当前索引号。注意不要写成死循环！
+@while指令。
- testString: 'assert(code.match(/@while /g), "Your code should use the @while directive.");'
- - text: 您的代码应将索引变量设置为1才能启动。
- testString: 'assert(code.match(/\$.*:\s*?1;/gi), "Your code should set an index variable to 1 to start.");'
- - text: 您的代码应该递增计数器变量。
- testString: 'assert(code.match(/\$(.*):\s*?\$\1\s*?\+\s*?1;/gi), "Your code should increment the counter variable.");'
- - text: 您的.text-1类的font-size为5px。
- testString: 'assert($(".text-1").css("font-size") == "5px", "Your .text-1 class should have a font-size of 5px.");'
- - text: 您的.text-2类的font-size为10px。
- testString: 'assert($(".text-2").css("font-size") == "10px", "Your .text-2 class should have a font-size of 10px.");'
- - text: 您的.text-3类的font-size为15px。
- testString: 'assert($(".text-3").css("font-size") == "15px", "Your .text-3 class should have a font-size of 15px.");'
- - text: 您的.text-4类的font-size为20px。
- testString: 'assert($(".text-4").css("font-size") == "20px", "Your .text-4 class should have a font-size of 20px.");'
- - text: 您的.text-5类的font-size为25px。
- testString: 'assert($(".text-5").css("font-size") == "25px", "Your .text-5 class should have a font-size of 25px.");'
- - text: 您的.text-6类的font-size为30px。
- testString: 'assert($(".text-6").css("font-size") == "30px", "Your .text-6 class should have a font-size of 30px.");'
- - text: 您的.text-7类的font-size为35px。
- testString: 'assert($(".text-7").css("font-size") == "35px", "Your .text-7 class should have a font-size of 35px.");'
- - text: 您的.text-8类的font-size为40px。
- testString: 'assert($(".text-8").css("font-size") == "40px", "Your .text-8 class should have a font-size of 40px.");'
- - text: 您的.text-9类的font-size为45px。
- testString: 'assert($(".text-9").css("font-size") == "45px", "Your .text-9 class should have a font-size of 45px.");'
- - text: 您的.text-10类的font-size为50px。
- testString: 'assert($(".text-10").css("font-size") == "50px", "Your .text-10 class should have a font-size of 50px.");'
+ - text: 你的代码应使用@while指令。
+ testString: assert(code.match(/@while /g));
+ - text: 你的代码应将索引变量设置为 1 才能启动。
+ testString: assert(code.match(/\$.*:\s*?1;/gi));
+ - text: 你的代码应该递增计数器变量。
+ testString: assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
+ - text: .text-1class 的font-size应为 15px。
+ testString: assert($('.text-1').css('font-size') == '15px');
+ - text: .text-2class 的font-size应为 30px。
+ testString: assert($('.text-2').css('font-size') == '30px');
+ - text: .text-3class 的font-size应为 45px。
+ testString: assert($('.text-3').css('font-size') == '45px');
+ - text: .text-4class 的font-size应为 60px。
+ testString: assert($('.text-4').css('font-size') == '60px');
+ - text: .text-5class 的font-size应为 75px。
+ testString: assert($('.text-5').css('font-size') == '75px');
```
@@ -65,25 +72,31 @@ tests:
Hello
Hello
Hello
-Hello
-Hello
-Hello
-Hello
-Hello
- ``` - -Hello
+Hello
+Hello
+Hello
+Hello
``` -/section> +mixin是一组CSS声明，可以在整个样式表中重用。较新的CSS功能需要一段时间才能完全采用并准备好在所有浏览器中使用。随着功能添加到浏览器中，使用它们的CSS规则可能需要供应商前缀。考虑“盒子阴影”： 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;
}
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;
}
@mixin开头，后跟自定义名称。参数（上例中的$x ， $y ， $blur和$c ）是可选的。现在，只要需要一个box-shadow规则，只需要调用mixin一行代替必须输入所有供应商前缀。使用@include指令调用mixin ： div {
@include box-shadow（0px，0px，4px，＃fff）;
}
mixin是一组 CSS 声明，可以在整个样式表中重复使用。
+CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。比如 "box-shadow":
+
+```scss
+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;
+}
+```
+
+对于所有具有box-shadow属性的元素重写此规则，或者更改每个值以测试不同的效果，需要花费大量的精力。
+Mixins就像 CSS 的函数。以下是一个例子：
+
+```scss
+@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;
+}
+```
+
+定义以@mixin开头，后跟自定义名称。参数（$x，$y，$blur，以及上例中的$c是可选的。
+现在，只要在需要的地方使用@include调用上面定义的mixin，就可以自动添加好所有的浏览器前缀：mixin使用@include指令调用：
+
+```scss
+div {
+ @include box-shadow(0px, 0px, 4px, #fff);
+}
+```
+
+border-radius写一个mixin并给它一个$radius参数。它应该使用示例中的所有供应商前缀。然后使用border-radius mixin为#awesome元素提供15px的边界半径。 border-radius写一个mixin，并给它一个$radius参数。它应该使用示例中的所有浏览器前缀，然后使用border-radius mixin为#awesome元素提供 15px 的边框半径。
+border-radius的mixin ，它有一个名为$radius的参数。
+ - text: 你应声明名为border-radius的mixin，其中包含名为$radius的参数。
testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
- - text: 您的代码应包含使用$radius参数的-webkit-border-radius vender前缀。
+ - text: 你应该给$radius添加-webkit-border-radius浏览器前缀。
testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
- - text: 您的代码应包含使用$radius参数的-moz-border-radius vender前缀。
+ - text: 你应该给$radius添加-moz-border-radius浏览器前缀。
testString: assert(code.match(/-moz-border-radius:\s*?\$radius;/gi));
- - text: 您的代码应包含使用$radius参数的-ms-border-radius vender前缀。
+ - text: 你应该给$radius添加-ms-border-radius浏览器前缀。
testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
- - text: 您的代码应包含使用$radius参数的一般border-radius规则。
+ - text: 你应该给$radius添加border-radius。
testString: assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4);
- - text: 您的代码应使用@include关键字调用border-radius mixin ，将其设置为15px。
+ - text: 你应使用@include关键字调用border-radius mixin，并将其设置为 15px。
testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));
```
@@ -65,8 +101,24 @@ tests:
## Solution
extend的功能，可以很容易地从一个元素中借用CSS规则并在另一个元素上构建它们。例如，下面的CSS规则块会设置一个.panel类。它有background-color ， height和border 。 。面板{现在你想要另一个名为
背景颜色：红色;
身高：70px;
边框：2px纯绿色;
}
.big-panel 。它具有与.panel相同的基本属性，但也需要width和font-size 。可以从.panel复制并粘贴初始CSS规则，但是当您添加更多类型的面板时，代码会变得重复。 extend指令是一种重用为一个元素编写的规则的简单方法，然后为另一个元素添加更多： 。大面板{除了新样式之外，
@extend .panel;
宽度：150px;
font-size：2em;
}
.big-panel还具有与.panel相同的属性。 extend的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
+例如，下面的 CSS 规则块设置了.panelclass 的样式。它有background-color，height和border。
+
+```scss
+.panel{
+ background-color: red;
+ height: 70px;
+ border: 2px solid green;
+}
+```
+
+现在你需要另一个名为.big-panel的面板。它具有与.panel相同的基本属性，但还需要width和font-size。
+可以从.panel复制并粘贴初始 CSS 规则，但是当你添加更多类型的面板时，代码会变得重复。
+extend指令是一种重用为一个元素编写的规则的简单方法，然后为另一个元素添加更多：
+
+```scss
+.big-panel{
+ @extend .panel;
+ width: 150px;
+ font-size: 2em;
+}
+```
+
+除了新样式之外，.big-panel将具有与.panel相同的属性。
+.info的类.info-important ，并将background-color设置为洋红色。 .info的 class.info-important，并将background-color设置为洋红色。
+info-important类应该将background-color设置为magenta 。
+ - text: info-importantclass 应该将background-color设置为magenta。
testString: assert(code.match(/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi));
- - text: 您的info-important类应使用@extend从info类继承样式。
+ - text: info-importantclass 应使用@extend继承infoclass 的样式。
testString: assert(code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi));
```
@@ -54,7 +81,6 @@ tests:
This is a simple post. It has basic styling and can be extended for other uses.
This is an important post. It should extend the class ".info" and have its own CSS styles.
+This is a simple post. It has basic styling and can be extended for other uses.
+nesting CSS规则，这是组织样式表的有用方法。通常，每个元素都定位在不同的行上以对其进行样式设置，如下所示： nav {对于大型项目，CSS文件将包含许多行和规则。这是
背景颜色：红色;
}
nav ul {
list-style：none;
}
nav ul li {
display：inline-block;
}
nesting可以通过在相应的父元素中放置子样式规则来帮助组织代码的地方： nav {
背景颜色：红色;
ul {
list-style：none;
li {
display：inline-block;
}
}
}
嵌套，这在写样式表的时候会很有用。
+在 CSS 里，每个元素的样式都需要写在独立的代码块中，如下所示：
+
+```scss
+nav {
+ background-color: red;
+}
+
+nav ul {
+ list-style: none;
+}
+
+nav ul li {
+ display: inline-block;
+}
+```
+
+对于一个大型项目，CSS 规则会很复杂。这时，引入嵌套功能（即在对应的父元素中写子元素的样式）可以有效地简化代码：
+
+```scss
+nav {
+ background-color: red;
+
+ ul {
+ list-style: none;
+
+ li {
+ display: inline-block;
+ }
+ }
+}
+
+```
+
+nesting技术为.blog-post元素的两个子元素重新组织CSS规则。出于测试目的， h1应该位于p元素之前。 .blog-post中两个子元素的 CSS 代码。出于测试目的，h1应该出现在p元素之前。
+h1和p嵌套在.blog-post父元素中。
+ - 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));
```
@@ -47,7 +84,6 @@ tests:
This is a paragraph
- ``` @@ -59,8 +95,23 @@ tests: ## SolutionThis is a paragraph
+Partials在萨斯是持有的CSS代码段单独的文件。这些是在其他Sass文件中导入和使用的。这是将类似代码分组到模块中以保持组织有效的好方法。 partials名称以下划线（ _ ）字符开头，告诉Sass它是CSS的一小部分，而不是将其转换为CSS文件。此外，Sass文件以.scss文件扩展名结尾。要将partial的代码放入另一个Sass文件中，请使用@import指令。例如，如果所有mixins都保存在名为“_mixins.scss”的partial ，并且在“main.scss”文件中需要它们，则这是在主文件中使用它们的方法： //在main.scss文件中请注意，
@import'commpins'
import语句中不需要下划线 - Sass理解它是partial 。将partial导入文件后，可以使用所有变量， mixins和其他代码。 Partials是包含 CSS 代码段的单独文件。这些是在其他 Sass 文件中导入和使用的。我们可以把类似代码放到模块中，以保持代码结构规整且易于管理。
+partials的名称以下划线（_）字符开头，告诉 Sass 它是 CSS 的一小部分，而不是将其转换为 CSS 文件。此外，Sass 文件以.scss文件扩展名结尾。要将partial中的代码放入另一个 Sass 文件中，请使用@import指令。
+例如，如果所有mixins都保存在名为 "_mixins.scss " 的partial中，并且在"main.scss "文件中需要它们，这是如何在主文件中使用它们：
+
+```scss
+// In the main.scss file
+
+@import 'mixins'
+```
+
+请注意，import语句中不需要下划线——Sass 知道它是partial。将partial导入文件后，可以使用所有变量mixins和其他代码。
+@import语句，将名为_variables.scss的partial导入main.scss文件。 @import语句，将名为_variables.scss的partial导入 main.scss 文件。
+@import指令，并且不应在文件名中包含下划线。
+ - text: 你的代码应使用@import指令，并且不应在文件名中包含下划线。
testString: assert(code.match(/@import\s+?('|")variables\1/gi));
```
@@ -32,6 +46,9 @@ tests:
```html
// The main.scss file
+
+
+
```
@@ -43,8 +60,9 @@ tests:
## Solution
let和const关键字定义变量。在Sass中，变量以$开头，后跟变量名。以下是几个例子： $ main-fonts：Arial，sans-serif;变量有用的一个例子是当许多元素需要是相同的颜色时。如果更改了该颜色，则编辑代码的唯一位置是变量值。
$ headings-color：green;
//使用变量：
h1 {
font-family：$ main-fonts;
颜色：$ headings-color;
}
let和const关键字定义的。在 Sass 中，变量以$开头的，后跟变量名。
+这里有几个例子：
+
+```scss
+$main-fonts: Arial, sans-serif;
+$headings-color: green;
+
+//To use variables:
+h1 {
+ font-family: $main-fonts;
+ color: $headings-color;
+}
+```
+
+当需要把多个元素设置成相同颜色时，变量就会很有用。一旦我们需要更改颜色，只需要改变这个变量的值就好。
+$text-color并将其设置为红色。然后将.blog-post和h2的color属性值更改为$text-color变量。 $text-color并将其设置为红色。然后更改.blog-post和h2的color属性的值为$text-color变量。
+$text-color声明的Sass变量，其值为red。
+ - text: 你应该为$text-color声明一个值为红色的 Sass 变量。
testString: assert(code.match(/\$text-color:\s*?red;/g));
- - text: 您的代码应使用$text-color变量来更改.blog-post和h2项的color 。
+ - text: 你应使用$text-color变量来更改.blog-post和h2的颜色。
testString: assert(code.match(/color:\s*?\$text-color;/g));
- - text: 您的.blog-post元素应该是红色。
+ - text: .blog-post元素应为红色。
testString: assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
- - text: 你的h2元素应该是红色。
+ - text: h2元素应为红色。
testString: assert($('h2').css('color') == 'rgb(255, 0, 0)');
```
@@ -60,7 +79,6 @@ tests:
Even more random text within a paragraph
- ``` @@ -72,8 +90,31 @@ tests: ## SolutionThis is a paragraph with some random text in it
+Here is some more random text.
+Even more random text within a paragraph
+@for指令如何使用起始值和结束值循环一定次数。 Sass还提供了@each指令，它循环遍历列表或映射中的每个项目。在每次迭代时，变量将从列表或映射分配给当前值。 @each $颜色为蓝色，红色，绿色{地图的语法略有不同。这是一个例子：
。＃{$ color} -text {color：$ color;}
}
$ colors：（color1：blue，color2：red，color3：green）;请注意，需要
@each $ key，$ colors in colors {
。＃{$ color} -text {color：$ color;}
}
$key变量来引用地图中的键。否则，编译后的CSS将有color1 ， color2 ...在里面。以上两个代码示例都转换为以下CSS： .blue-text {
颜色：蓝色;
}
.red-text {
红色;
}
.green-text {
颜色：绿色;
}
@for指令如何使用起始值和结束值循环一定次数。Sass 还提供@each指令，该指令循环遍历列表或映射中的每个项目。
+在每次迭代时，变量将从列表映射赋值给当前值。
+
+```scss
+@each $color in blue, red, green {
+ .#{$color}-text {color: $color;}
+}
+```
+
+map 的语法略有不同。这是一个例子：
+
+```scss
+$colors: (color1: blue, color2: red, color3: green);
+
+@each $key, $color in $colors {
+ .#{$color}-text {color: $color;}
+}
+```
+
+请注意，需要$key变量来引用 map 中的键。否则，编译后的 CSS 将包含color1，color2......
+以上两个代码示例都转换为以下 CSS：
+
+```scss
+.blue-text {
+ color: blue;
+}
+
+.red-text {
+ color: red;
+}
+
+.green-text {
+ color: green;
+}
+```
+
+@each列表的@each指令： blue, black, red ，并将每个变量分配给.color-bg类，其中“颜色”部分为每个项目更改。每个类应该将background-color设置为相应的颜色。 @each指令，通过一个列表：blue,black,red并将每个变量分配给.color-bgclass, 其中每个项目的“颜色”部分都会发生变化。
+每个 class 都应该将background-color设置为相应的颜色。
+@each指令。
+ - text: 你的代码应使用@each指令。
testString: assert(code.match(/@each /g));
- - text: 您的.blue-bg类应该具有蓝色的background-color 。
+ - text: .blue-bgclass 背景色应为蓝色。
testString: assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
- - text: 你的.black-bg类的background-color为黑色。
+ - text: .black-bgclass 背景色应为黑色。
testString: assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
- - text: 您的.red-bg类应该具有红色的background-color 。
+ - text: .red-bgclass 背景色应为红色。
testString: assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
```
@@ -49,20 +91,57 @@ tests:
-
```
-
-
@for指令在循环中添加样式，非常类似于JavaScript中的for循环。 @for以两种方式使用：“ @for ”或“ @for ”。主要区别在于“从头到尾” 排除了结束号码，“从头到尾” 包括结束号码。这是一个开始到最后的例子： @for $ i从1到12 {
.col - ＃{$ i} {width：100％/ 12 * $ i; }
}
#{$i}部分是将变量（ i ）与文本组合成字符串的语法。当Sass文件转换为CSS时，它看起来像这样： .col-1 {这是创建网格布局的有效方法。现在，您有12个可用作CSS类的列宽选项。
宽度：8.33333％;
}
.col-2 {
宽度：16.66667％;
}
...
.col-12 {
宽度：100％;
}
@for循环，它的表现类似与 JavaScript 中的for循环。
+@for以两种方式使用："start through end" 或 "start to end"。主要区别在于“开始结束” 排除 结束号码，而“开始结束” 包括 结束号码。
+这是一个开始 到 结束示例：
+
+```scss
+@for $i from 1 through 12 {
+ .col-#{$i} { width: 100%/12 * $i; }
+}
+```
+
+#{$i}部分是将变量（i）与文本组合成字符串的语法。当 Sass 文件转换为 CSS 时，它看起来像这样：
+
+```scss
+.col-1 {
+ width: 8.33333%;
+}
+
+.col-2 {
+ width: 16.66667%;
+}
+
+...
+
+.col-12 {
+ width: 100%;
+}
+```
+
+这是创建网格布局的有效方法。现在，你有 12 个可用作 CSS classes 的列宽选项。
+@for指令，它接受一个从1 到 6的变量$j 。它应该创建5个名为.text-1到.text-5 ，其中每个类的font-size设置为10px乘以索引。 @for指令，使$j的值为从 1（包含）到 6（不包含）。
+它应该创建 5 个名为.text-1的 classes 到.text-5，其中每个 class 的font-size设置为 15px 乘以索引。
+@for指令。
+ - text: 你应使用@for指令。
testString: assert(code.match(/@for /g));
- - text: 您的.text-1类的font-size为10px。
+ - text: .text-1class 的font-size应为 15px。
testString: assert($('.text-1').css('font-size') == '15px');
- - text: 您的.text-2类的font-size为20px。
+ - text: .text-2class 的font-size应为 30px。
testString: assert($('.text-2').css('font-size') == '30px');
- - text: 您的.text-3类的font-size为30px。
+ - text: .text-3class 的font-size应为 45px。
testString: assert($('.text-3').css('font-size') == '45px');
- - text: 您的.text-4类的font-size为40px。
+ - text: .text-4class 的font-size应为 60px。
testString: assert($('.text-4').css('font-size') == '60px');
- - text: 您的.text-5类的font-size为50px。
+ - text: .text-5class 的font-size应为 75px。
testString: assert($('.text-5').css('font-size') == '75px');
```
@@ -51,7 +84,6 @@ tests:
Hello
Hello
Hello
- ``` @@ -63,8 +95,35 @@ tests: ## SolutionHello
+Hello
+Hello
+Hello
+Hello
``` -/section> +```html + + +Hello
+Hello
+Hello
+Hello
+Hello
+``` +@if指令对于测试特定情况很有用 - 它就像JavaScript中的if语句一样。 @mixin make-bold（$ bool）{就像在JavaScript中一样，
@if $ bool == true {
font-weight：bold;
}
}
@else if和@else测试更多条件： @mixin text-effect（$ val）{
@if $ val == danger {
红色;
}
@else if $ val == alert {
颜色：黄色;
}
@else if $ val == success {
颜色：绿色;
}
@else {
颜色：黑色;
}
}
@if指令对于测试特定情况非常有用--它的工作方式与 JavaScript中的if语句类似。
+
+```scss
+@mixin make-bold($bool) {
+ @if $bool == true {
+ font-weight: bold;
+ }
+}
+```
+
+类似 JavaScript，你可以在 Sass 中使用@else if和@else添加更多条件：
+
+```scss
+@mixin text-effect($val) {
+ @if $val == danger {
+ color: red;
+ }
+ @else if $val == alert {
+ color: yellow;
+ }
+ @else if $val == success {
+ color: green;
+ }
+ @else {
+ color: black;
+ }
+}
+```
+
+border-stroke的mixin ，它接受一个参数$val 。 mixin应使用@if ， @else if和@else检查以下条件：
-光 - 1px纯黑色-如果
中等 - 3px纯黑色
重 - 6px纯黑色
$val不是light，medium，或者heavy，则边框应该设置为none。
+
+创建一个名为border-stroke的mixin，它接受一个参数$val。mixin应使用@if，@else if和@else检查以下条件：
+
+```scss
+light - 1px solid black
+medium - 3px solid black
+heavy - 6px solid black
+```
+
+如果 $val 不是 light、medium 或者 heavy，border 应该设置为 none。
## Tests
@@ -20,15 +57,15 @@ localeTitle: 使用@if和@else将逻辑添加到您的样式
```yml
tests:
- - text: 你的代码应该声明一个名为border-stroke的mixin ，它有一个名为$val的参数。
+ - text: 你应该声明一个名为border-stroke的mixin，它有一个名为$val的参数。
testString: assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
- - text: 你的mixin应该有一个@if语句来检查$val是否很亮，并将border设置为1px纯黑色。
+ - 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));
- - text: 你的mixin应该有一个@else if语句来检查$val是否为中等，并将border设置为3px纯黑色。
+ - 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));
- - text: 你的mixin应该有一个@else if语句来检查$val是否很重，并将border设置为6px纯黑色。
+ - 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));
- - text: 你的mixin应该有一个@else语句来设置border为none。
+ - text: mixin应该有一个@else语句来将border设置为 none。
testString: assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
```
@@ -54,7 +91,6 @@ tests:
-
```
@@ -66,8 +102,33 @@ tests:
## Solution
-```js
-// solution required
+```html
+
+
+
```
-/section>
+