fix(i18n): update Chinese translation of sass (#38595)
Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>
This commit is contained in:
ZhichengChen
GitHub
@ -2,47 +2,54 @@
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 应用样式直到满足@while的条件
|
||||
forumTopicId: 301454
|
||||
localeTitle: 使用 @while 当条件满足时样式生效
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>@while</code>指令是一个与JavaScript <code>while</code>循环具有类似功能的选项。它会创建CSS规则，直到满足条件。 <code>@for</code>挑战给出了一个创建简单网格系统的示例。这也适用于<code>@while</code> 。 <blockquote> $ x：1; <br> @while $ x <13 { <br> .col - ＃{$ x} {width：100％/ 12 * $ x;} <br> $ x：$ x + 1; <br> } </blockquote>首先，定义变量<code>$x</code>并将其设置为1.接下来，使用<code>@while</code>指令创建网格系统， <i>而</i> <code>$x</code>小于13.在设置<code>width</code>的CSS规则后， <code>$x</code>增加1以避免无限循环。 </section>
|
||||
<section id='description'>
|
||||
Sass 中的<code>@while</code>指令与 JavaScript 中的<code>while</code>类似。只要满足条件，它就会一直创建 CSS 代码。
|
||||
<code>@for</code>挑战提供了一个创建简单网格系统的示例。这也适用于<code>@while</code>。
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@while $x < 13 {
|
||||
.col-#{$x} { width: 100%/12 * $x;}
|
||||
$x: $x + 1;
|
||||
}
|
||||
```
|
||||
|
||||
首先，定义变量<code>$x</code>并将其设置为 1。接下来，使用<code>@while</code>指令，当<code>$x</code>小于 13 时创建网格系统 。
|
||||
在设置<code>width</code>的 CSS 规则后，<code>$x</code>增加 1 以避免无限循环。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>@while</code>创建一系列具有不同<code>font-sizes</code>的类。从<code>text-1</code>到<code>text-10</code>应该有10个不同的类。然后将<code>font-size</code>设置为5px乘以当前索引号。确保避免无限循环！ </section>
|
||||
<section id='instructions'>
|
||||
使用<code>@while</code>创建一系列具有不同<code>font-sizes</code>的 class。
|
||||
从<code>text-1</code>到<code>text-10</code>应该有 10 个不同的 class。然后将<code>font-size</code>设置为 15px 乘以当前索引号。注意不要写成死循环！
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>@while</code>指令。
|
||||
testString: 'assert(code.match(/@while /g), "Your code should use the <code>@while</code> 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: 您的<code>.text-1</code>类的<code>font-size</code>为5px。
|
||||
testString: 'assert($(".text-1").css("font-size") == "5px", "Your <code>.text-1</code> class should have a <code>font-size</code> of 5px.");'
|
||||
- text: 您的<code>.text-2</code>类的<code>font-size</code>为10px。
|
||||
testString: 'assert($(".text-2").css("font-size") == "10px", "Your <code>.text-2</code> class should have a <code>font-size</code> of 10px.");'
|
||||
- text: 您的<code>.text-3</code>类的<code>font-size</code>为15px。
|
||||
testString: 'assert($(".text-3").css("font-size") == "15px", "Your <code>.text-3</code> class should have a <code>font-size</code> of 15px.");'
|
||||
- text: 您的<code>.text-4</code>类的<code>font-size</code>为20px。
|
||||
testString: 'assert($(".text-4").css("font-size") == "20px", "Your <code>.text-4</code> class should have a <code>font-size</code> of 20px.");'
|
||||
- text: 您的<code>.text-5</code>类的<code>font-size</code>为25px。
|
||||
testString: 'assert($(".text-5").css("font-size") == "25px", "Your <code>.text-5</code> class should have a <code>font-size</code> of 25px.");'
|
||||
- text: 您的<code>.text-6</code>类的<code>font-size</code>为30px。
|
||||
testString: 'assert($(".text-6").css("font-size") == "30px", "Your <code>.text-6</code> class should have a <code>font-size</code> of 30px.");'
|
||||
- text: 您的<code>.text-7</code>类的<code>font-size</code>为35px。
|
||||
testString: 'assert($(".text-7").css("font-size") == "35px", "Your <code>.text-7</code> class should have a <code>font-size</code> of 35px.");'
|
||||
- text: 您的<code>.text-8</code>类的<code>font-size</code>为40px。
|
||||
testString: 'assert($(".text-8").css("font-size") == "40px", "Your <code>.text-8</code> class should have a <code>font-size</code> of 40px.");'
|
||||
- text: 您的<code>.text-9</code>类的<code>font-size</code>为45px。
|
||||
testString: 'assert($(".text-9").css("font-size") == "45px", "Your <code>.text-9</code> class should have a <code>font-size</code> of 45px.");'
|
||||
- text: 您的<code>.text-10</code>类的<code>font-size</code>为50px。
|
||||
testString: 'assert($(".text-10").css("font-size") == "50px", "Your <code>.text-10</code> class should have a <code>font-size</code> of 50px.");'
|
||||
- text: 你的代码应使用<code>@while</code>指令。
|
||||
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: <code>.text-1</code>class 的<code>font-size</code>应为 15px。
|
||||
testString: assert($('.text-1').css('font-size') == '15px');
|
||||
- text: <code>.text-2</code>class 的<code>font-size</code>应为 30px。
|
||||
testString: assert($('.text-2').css('font-size') == '30px');
|
||||
- text: <code>.text-3</code>class 的<code>font-size</code>应为 45px。
|
||||
testString: assert($('.text-3').css('font-size') == '45px');
|
||||
- text: <code>.text-4</code>class 的<code>font-size</code>应为 60px。
|
||||
testString: assert($('.text-4').css('font-size') == '60px');
|
||||
- text: <code>.text-5</code>class 的<code>font-size</code>应为 75px。
|
||||
testString: assert($('.text-5').css('font-size') == '75px');
|
||||
|
||||
```
|
||||
|
||||
@ -65,25 +72,31 @@ tests:
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
<p class="text-6">Hello</p>
|
||||
<p class="text-7">Hello</p>
|
||||
<p class="text-8">Hello</p>
|
||||
<p class="text-9">Hello</p>
|
||||
<p class="text-10">Hello</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
$x: 1;
|
||||
@while $x < 6 {
|
||||
.text-#{$x}{
|
||||
font-size: 15px * $x;
|
||||
}
|
||||
$x: $x + 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
@ -2,32 +2,68 @@
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Mixins创建可重用的CSS
|
||||
forumTopicId: 301455
|
||||
localeTitle: 用 Mixins 创建可重用 CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在Sass中， <code>mixin</code>是一组CSS声明，可以在整个样式表中重用。较新的CSS功能需要一段时间才能完全采用并准备好在所有浏览器中使用。随着功能添加到浏览器中，使用它们的CSS规则可能需要供应商前缀。考虑“盒子阴影”： <blockquote> div { <br> -webkit-box-shadow：0px 0px 4px #fff; <br> -moz-box-shadow：0px 0px 4px #fff; <br> -ms-box-shadow：0px 0px 4px #fff; <br> box-shadow：0px 0px 4px #fff; <br> } </blockquote>对于具有<code>box-shadow</code>所有元素重写此规则，或者更改每个值以测试不同的效果，需要进行大量的输入。 <code>Mixins</code>就像CSS的功能。这是如何写一个： <blockquote> @mixin box-shadow（$x，$y，$blur，$c）{ <br> -webkit-box-shadow：$x $y $blur $c; <br> -moz-box-shadow：$x $y $blur $c; <br> -ms-box-shadow：$x $y $blur $c; <br> box-shadow：$x $y $blur $c; <br> } </blockquote>该定义以<code>@mixin</code>开头，后跟自定义名称。参数（上例中的<code>$x</code> ， <code>$y</code> ， <code>$blur</code>和<code>$c</code> ）是可选的。现在，只要需要一个<code>box-shadow</code>规则，只需要调用<code>mixin</code>一行代替必须输入所有供应商前缀。使用<code>@include</code>指令调用<code>mixin</code> ： <blockquote> div { <br> @include box-shadow（0px，0px，4px，＃fff）; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
在 Sass 中，<code>mixin</code>是一组 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;
|
||||
}
|
||||
```
|
||||
|
||||
对于所有具有<code>box-shadow</code>属性的元素重写此规则，或者更改每个值以测试不同的效果，需要花费大量的精力。
|
||||
<code>Mixins</code>就像 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;
|
||||
}
|
||||
```
|
||||
|
||||
定义以<code>@mixin</code>开头，后跟自定义名称。参数（<code>$x</code>，<code>$y</code>，<code>$blur</code>，以及上例中的<code>$c</code>是可选的。
|
||||
现在，只要在需要的地方使用<code>@include</code>调用上面定义的<code>mixin</code>，就可以自动添加好所有的浏览器前缀：<code>mixin</code>使用<code>@include</code>指令调用：
|
||||
|
||||
```scss
|
||||
div {
|
||||
@include box-shadow(0px, 0px, 4px, #fff);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为<code>border-radius</code>写一个<code>mixin</code>并给它一个<code>$radius</code>参数。它应该使用示例中的所有供应商前缀。然后使用<code>border-radius</code> <code>mixin</code>为<code>#awesome</code>元素提供15px的边界半径。 </section>
|
||||
<section id='instructions'>
|
||||
为<code>border-radius</code>写一个<code>mixin</code>，并给它一个<code>$radius</code>参数。它应该使用示例中的所有浏览器前缀，然后使用<code>border-radius mixin</code>为<code>#awesome</code>元素提供 15px 的边框半径。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的代码应该声明一个名为<code>border-radius</code>的<code>mixin</code> ，它有一个名为<code>$radius</code>的参数。
|
||||
- text: 你应声明名为<code>border-radius</code>的<code>mixin</code>，其中包含名为<code>$radius</code>的参数。
|
||||
testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
- text: 您的代码应包含使用<code>$radius</code>参数的<code>-webkit-border-radius</code> vender前缀。
|
||||
- text: 你应该给<code>$radius</code>添加<code>-webkit-border-radius</code>浏览器前缀。
|
||||
testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
|
||||
- text: 您的代码应包含使用<code>$radius</code>参数的<code>-moz-border-radius</code> vender前缀。
|
||||
- text: 你应该给<code>$radius</code>添加<code>-moz-border-radius</code>浏览器前缀。
|
||||
testString: assert(code.match(/-moz-border-radius:\s*?\$radius;/gi));
|
||||
- text: 您的代码应包含使用<code>$radius</code>参数的<code>-ms-border-radius</code> vender前缀。
|
||||
- text: 你应该给<code>$radius</code>添加<code>-ms-border-radius</code>浏览器前缀。
|
||||
testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
|
||||
- text: 您的代码应包含使用<code>$radius</code>参数的一般<code>border-radius</code>规则。
|
||||
- text: 你应该给<code>$radius</code>添加<code>border-radius</code>。
|
||||
testString: assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4);
|
||||
- text: 您的代码应使用<code>@include</code>关键字调用<code>border-radius mixin</code> ，将其设置为15px。
|
||||
- text: 你应使用<code>@include</code>关键字调用<code>border-radius mixin</code>，并将其设置为 15px。
|
||||
testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));
|
||||
|
||||
```
|
||||
@ -65,8 +101,24 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
@ -2,24 +2,51 @@
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301456
|
||||
localeTitle: 将一组CSS样式扩展到另一个元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Sass有一个名为<code>extend</code>的功能，可以很容易地从一个元素中借用CSS规则并在另一个元素上构建它们。例如，下面的CSS规则块会设置一个<code>.panel</code>类。它有<code>background-color</code> ， <code>height</code>和<code>border</code> 。 <blockquote> 。面板{ <br>背景颜色：红色; <br>身高：70px; <br>边框：2px纯绿色; <br> } </blockquote>现在你想要另一个名为<code>.big-panel</code> 。它具有与<code>.panel</code>相同的基本属性，但也需要<code>width</code>和<code>font-size</code> 。可以从<code>.panel</code>复制并粘贴初始CSS规则，但是当您添加更多类型的面板时，代码会变得重复。 <code>extend</code>指令是一种重用为一个元素编写的规则的简单方法，然后为另一个元素添加更多： <blockquote> 。大面板{ <br> @extend .panel; <br>宽度：150px; <br> font-size：2em; <br> } </blockquote>除了新样式之外， <code>.big-panel</code>还具有与<code>.panel</code>相同的属性。 </section>
|
||||
<section id='description'>
|
||||
Sass 有一个名为<code>extend</code>的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
|
||||
例如，下面的 CSS 规则块设置了<code>.panel</code>class 的样式。它有<code>background-color</code>，<code>height</code>和<code>border</code>。
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
background-color: red;
|
||||
height: 70px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
```
|
||||
|
||||
现在你需要另一个名为<code>.big-panel</code>的面板。它具有与<code>.panel</code>相同的基本属性，但还需要<code>width</code>和<code>font-size</code>。
|
||||
可以从<code>.panel</code>复制并粘贴初始 CSS 规则，但是当你添加更多类型的面板时，代码会变得重复。
|
||||
<code>extend</code>指令是一种重用为一个元素编写的规则的简单方法，然后为另一个元素添加更多：
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@extend .panel;
|
||||
width: 150px;
|
||||
font-size: 2em;
|
||||
}
|
||||
```
|
||||
|
||||
除了新样式之外，<code>.big-panel</code>将具有与<code>.panel</code>相同的属性。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个扩展<code>.info</code>的类<code>.info-important</code> ，并将<code>background-color</code>设置为洋红色。 </section>
|
||||
<section id='instructions'>
|
||||
创建一个扩展<code>.info</code>的 class<code>.info-important</code>，并将<code>background-color</code>设置为洋红色。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>info-important</code>类应该将<code>background-color</code>设置为<code>magenta</code> 。
|
||||
- text: <code>info-important</code>class 应该将<code>background-color</code>设置为<code>magenta</code>。
|
||||
testString: assert(code.match(/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi));
|
||||
- text: 您的<code>info-important</code>类应使用<code>@extend</code>从<code>info</code>类继承样式。
|
||||
- text: <code>info-important</code>class 应使用<code>@extend</code>继承<code>info</code>class 的样式。
|
||||
testString: assert(code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi));
|
||||
|
||||
```
|
||||
@ -54,7 +81,6 @@ tests:
|
||||
<div class="info">
|
||||
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -66,8 +92,33 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
h3{
|
||||
text-align: center;
|
||||
}
|
||||
.info{
|
||||
width: 200px;
|
||||
border: 1px solid black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.info-important{
|
||||
@extend .info;
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h3>Posts</h3>
|
||||
<div class="info-important">
|
||||
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -2,22 +2,36 @@
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Partials将您的样式拆分为较小的块
|
||||
forumTopicId: 301459
|
||||
localeTitle: 用 Partials 将你的样式分成小块
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>Partials</code>在萨斯是持有的CSS代码段单独的文件。这些是在其他Sass文件中导入和使用的。这是将类似代码分组到模块中以保持组织有效的好方法。 <code>partials</code>名称以下划线（ <code>_</code> ）字符开头，告诉Sass它是CSS的一小部分，而不是将其转换为CSS文件。此外，Sass文件以<code>.scss</code>文件扩展名结尾。要将<code>partial</code>的代码放入另一个Sass文件中，请使用<code>@import</code>指令。例如，如果所有<code>mixins</code>都保存在名为“_mixins.scss”的<code>partial</code> ，并且在“main.scss”文件中需要它们，则这是在主文件中使用它们的方法： <blockquote> //在main.scss文件中<br><br> @import'commpins' </blockquote>请注意， <code>import</code>语句中不需要下划线 - Sass理解它是<code>partial</code> 。将<code>partial</code>导入文件后，可以使用所有变量， <code>mixins</code>和其他代码。 </section>
|
||||
<section id='description'>
|
||||
Sass 中的<code>Partials</code>是包含 CSS 代码段的单独文件。这些是在其他 Sass 文件中导入和使用的。我们可以把类似代码放到模块中，以保持代码结构规整且易于管理。
|
||||
<code>partials</code>的名称以下划线（<code>_</code>）字符开头，告诉 Sass 它是 CSS 的一小部分，而不是将其转换为 CSS 文件。此外，Sass 文件以<code>.scss</code>文件扩展名结尾。要将<code>partial</code>中的代码放入另一个 Sass 文件中，请使用<code>@import</code>指令。
|
||||
例如，如果所有<code>mixins</code>都保存在名为 "_mixins.scss " 的<code>partial</code>中，并且在"main.scss "文件中需要它们，这是如何在主文件中使用它们：
|
||||
|
||||
```scss
|
||||
// In the main.scss file
|
||||
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
请注意，<code>import</code>语句中不需要下划线——Sass 知道它是<code>partial</code>。将<code>partial</code>导入文件后，可以使用所有变量<code>mixins</code>和其他代码。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">编写<code>@import</code>语句，将名为<code>_variables.scss</code>的<code>partial</code>导入main.scss文件。 </section>
|
||||
<section id='instructions'>
|
||||
编写<code>@import</code>语句，将名为<code>_variables.scss</code>的<code>partial</code>导入 main.scss 文件。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>@import</code>指令，并且不应在文件名中包含下划线。
|
||||
- text: 你的代码应使用<code>@import</code>指令，并且不应在文件名中包含下划线。
|
||||
testString: assert(code.match(/@import\s+?('|")variables\1/gi));
|
||||
|
||||
```
|
||||
@ -32,6 +46,9 @@ tests:
|
||||
```html
|
||||
// The main.scss file
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -43,8 +60,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
// The main.scss file
|
||||
@import 'variables'
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
@ -2,28 +2,47 @@
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Sass变量存储数据
|
||||
forumTopicId: 301460
|
||||
localeTitle: 用 Sass 变量存储数据
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> 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> //使用变量： <br> h1 { <br> font-family：$ main-fonts; <br>颜色：$ headings-color; <br> } </blockquote>变量有用的一个例子是当许多元素需要是相同的颜色时。如果更改了该颜色，则编辑代码的唯一位置是变量值。 </section>
|
||||
<section id='description'>
|
||||
Sass 不同于 CSS 的一个特点是它允许使用变量。我们可以在 Sass 中声明变量，并为它赋值，就像我们在 JavaScript 中一样。
|
||||
在 JavaScript 中，变量是使用<code>let</code>和<code>const</code>关键字定义的。在 Sass 中，变量以<code>$</code>开头的，后跟变量名。
|
||||
这里有几个例子：
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
|
||||
//To use variables:
|
||||
h1 {
|
||||
font-family: $main-fonts;
|
||||
color: $headings-color;
|
||||
}
|
||||
```
|
||||
|
||||
当需要把多个元素设置成相同颜色时，变量就会很有用。一旦我们需要更改颜色，只需要改变这个变量的值就好。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个变量<code>$text-color</code>并将其设置为红色。然后将<code>.blog-post</code>和<code>h2</code>的<code>color</code>属性值更改为<code>$text-color</code>变量。 </section>
|
||||
<section id='instructions'>
|
||||
创建一个变量<code>$text-color</code>并将其设置为红色。然后更改<code>.blog-post</code>和<code>h2</code>的<code>color</code>属性的值为<code>$text-color</code>变量。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该具有为<code>$text-color</code>声明的Sass变量，其值为red。
|
||||
- text: 你应该为<code>$text-color</code>声明一个值为红色的 Sass 变量。
|
||||
testString: assert(code.match(/\$text-color:\s*?red;/g));
|
||||
- text: 您的代码应使用<code>$text-color</code>变量来更改<code>.blog-post</code>和<code>h2</code>项的<code>color</code> 。
|
||||
- text: 你应使用<code>$text-color</code>变量来更改<code>.blog-post</code>和<code>h2</code>的<code>颜色</code>。
|
||||
testString: assert(code.match(/color:\s*?\$text-color;/g));
|
||||
- text: 您的<code>.blog-post</code>元素应该是红色。
|
||||
- text: <code>.blog-post</code>元素应为红色。
|
||||
testString: assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
|
||||
- text: 你的<code>h2</code>元素应该是红色。
|
||||
- text: <code>h2</code>元素应为红色。
|
||||
testString: assert($('h2').css('color') == 'rgb(255, 0, 0)');
|
||||
|
||||
```
|
||||
@ -60,7 +79,6 @@ tests:
|
||||
<h2>Here is another header</h2>
|
||||
<p>Even more random text within a paragraph</p>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -72,8 +90,31 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
$text-color: red;
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post, h2 {
|
||||
color: $text-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="header">Learn Sass</h1>
|
||||
<div class="blog-post">
|
||||
<h2>Some random title</h2>
|
||||
<p>This is a paragraph with some random text in it</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Header #2</h2>
|
||||
<p>Here is some more random text.</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Here is another header</h2>
|
||||
<p>Even more random text within a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
@ -2,28 +2,70 @@
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用@each映射列表中的项目
|
||||
forumTopicId: 301461
|
||||
localeTitle: 使用 @each 遍历列表中的项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">最后一个挑战显示了<code>@for</code>指令如何使用起始值和结束值循环一定次数。 Sass还提供了<code>@each</code>指令，它循环遍历列表或映射中的每个项目。在每次迭代时，变量将从列表或映射分配给当前值。 <blockquote> @each $颜色为蓝色，红色，绿色{ <br> 。＃{$ color} -text {color：$ color;} <br> } </blockquote>地图的语法略有不同。这是一个例子： <blockquote> $ colors：（color1：blue，color2：red，color3：green）; <br><br> @each $ key，$ colors in colors { <br> 。＃{$ color} -text {color：$ color;} <br> } </blockquote>请注意，需要<code>$key</code>变量来引用地图中的键。否则，编译后的CSS将有<code>color1</code> ， <code>color2</code> ...在里面。以上两个代码示例都转换为以下CSS： <blockquote> .blue-text { <br>颜色：蓝色; <br> } <br><br> .red-text { <br>红色; <br> } <br><br> .green-text { <br>颜色：绿色; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
|
||||
最后一个挑战显示了<code>@for</code>指令如何使用起始值和结束值循环一定次数。Sass 还提供<code>@each</code>指令，该指令循环遍历列表或映射中的每个项目。
|
||||
在每次迭代时，变量将从列表映射赋值给当前值。
|
||||
|
||||
```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;}
|
||||
}
|
||||
```
|
||||
|
||||
请注意，需要<code>$key</code>变量来引用 map 中的键。否则，编译后的 CSS 将包含<code>color1</code>，<code>color2</code>......
|
||||
以上两个代码示例都转换为以下 CSS：
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">编写一个<code>@each</code>列表的<code>@each</code>指令： <code>blue, black, red</code> ，并将每个变量分配给<code>.color-bg</code>类，其中“颜色”部分为每个项目更改。每个类应该将<code>background-color</code>设置为相应的颜色。 </section>
|
||||
<section id='instructions'>
|
||||
|
||||
编写一个<code>@each</code>指令，通过一个列表：<code>blue,black,red</code>并将每个变量分配给<code>.color-bg</code>class, 其中每个项目的“颜色”部分都会发生变化。
|
||||
每个 class 都应该将<code>background-color</code>设置为相应的颜色。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该使用<code>@each</code>指令。
|
||||
- text: 你的代码应使用<code>@each</code>指令。
|
||||
testString: assert(code.match(/@each /g));
|
||||
- text: 您的<code>.blue-bg</code>类应该具有蓝色的<code>background-color</code> 。
|
||||
- text: <code>.blue-bg</code>class 背景色应为蓝色。
|
||||
testString: assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
- text: 你的<code>.black-bg</code>类的<code>background-color</code>为黑色。
|
||||
- text: <code>.black-bg</code>class 背景色应为黑色。
|
||||
testString: assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
- text: 您的<code>.red-bg</code>类应该具有红色的<code>background-color</code> 。
|
||||
- text: <code>.red-bg</code>class 背景色应为红色。
|
||||
testString: assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
|
||||
|
||||
```
|
||||
@ -49,20 +91,57 @@ tests:
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
The solution requires using the $color variable twice: once for the class name and once for setting the background color. You can use either the list or map data type.
|
||||
|
||||
### List Data type
|
||||
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
|
||||
@each $color in blue, black, red {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
/section>
|
||||
### Map Data type
|
||||
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
|
||||
$colors: (color1: blue, color2: black, color3: red);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,32 +2,65 @@
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用@for创建Sass循环
|
||||
forumTopicId: 301462
|
||||
localeTitle: 使用 @for 创建一个 Sass 循环
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>@for</code>指令在循环中添加样式，非常类似于JavaScript中的<code>for</code>循环。 <code>@for</code>以两种方式使用：“ <code>@for</code> ”或“ <code>@for</code> ”。主要区别在于“从头到尾” <em>排除</em>了结束号码，“从头到尾” <em>包括</em>结束号码。这是一个开始<b>到</b>最后的例子： <blockquote> @for $ i从1到12 { <br> .col - ＃{$ i} {width：100％/ 12 * $ i; } <br> } </blockquote> <code>#{$i}</code>部分是将变量（ <code>i</code> ）与文本组合成字符串的语法。当Sass文件转换为CSS时，它看起来像这样： <blockquote> .col-1 { <br>宽度：8.33333％; <br> } <br><br> .col-2 { <br>宽度：16.66667％; <br> } <br><br> ... <br><br> .col-12 { <br>宽度：100％; <br> } </blockquote>这是创建网格布局的有效方法。现在，您有12个可用作CSS类的列宽选项。 </section>
|
||||
<section id='description'>
|
||||
你可以在 Sass 中使用<code>@for</code>循环，它的表现类似与 JavaScript 中的<code>for</code>循环。
|
||||
<code>@for</code>以两种方式使用："start through end" 或 "start to end"。主要区别在于“开始结束”<em> 排除 </em> 结束号码，而“开始结束”<em> 包括 </em> 结束号码。
|
||||
这是一个开始 <b> 到 </b> 结束示例：
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 12 {
|
||||
.col-#{$i} { width: 100%/12 * $i; }
|
||||
}
|
||||
```
|
||||
|
||||
<code>#{$i}</code>部分是将变量（<code>i</code>）与文本组合成字符串的语法。当 Sass 文件转换为 CSS 时，它看起来像这样：
|
||||
|
||||
```scss
|
||||
.col-1 {
|
||||
width: 8.33333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 16.66667%;
|
||||
}
|
||||
|
||||
...
|
||||
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
这是创建网格布局的有效方法。现在，你有 12 个可用作 CSS classes 的列宽选项。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">写一个<code>@for</code>指令，它接受一个从1 <b>到</b> 6的变量<code>$j</code> 。它应该创建5个名为<code>.text-1</code>到<code>.text-5</code> ，其中每个类的<code>font-size</code>设置为10px乘以索引。 </section>
|
||||
<section id='instructions'>
|
||||
编写<code>@for</code>指令，使<code>$j</code>的值为从 1（包含）到 6（不包含）。
|
||||
它应该创建 5 个名为<code>.text-1</code>的 classes 到<code>.text-5</code>，其中每个 class 的<code>font-size</code>设置为 15px 乘以索引。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>@for</code>指令。
|
||||
- text: 你应使用<code>@for</code>指令。
|
||||
testString: assert(code.match(/@for /g));
|
||||
- text: 您的<code>.text-1</code>类的<code>font-size</code>为10px。
|
||||
- text: <code>.text-1</code>class 的<code>font-size</code>应为 15px。
|
||||
testString: assert($('.text-1').css('font-size') == '15px');
|
||||
- text: 您的<code>.text-2</code>类的<code>font-size</code>为20px。
|
||||
- text: <code>.text-2</code>class 的<code>font-size</code>应为 30px。
|
||||
testString: assert($('.text-2').css('font-size') == '30px');
|
||||
- text: 您的<code>.text-3</code>类的<code>font-size</code>为30px。
|
||||
- text: <code>.text-3</code>class 的<code>font-size</code>应为 45px。
|
||||
testString: assert($('.text-3').css('font-size') == '45px');
|
||||
- text: 您的<code>.text-4</code>类的<code>font-size</code>为40px。
|
||||
- text: <code>.text-4</code>class 的<code>font-size</code>应为 60px。
|
||||
testString: assert($('.text-4').css('font-size') == '60px');
|
||||
- text: 您的<code>.text-5</code>类的<code>font-size</code>为50px。
|
||||
- text: <code>.text-5</code>class 的<code>font-size</code>应为 75px。
|
||||
testString: assert($('.text-5').css('font-size') == '75px');
|
||||
|
||||
```
|
||||
@ -51,7 +84,6 @@ tests:
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -63,8 +95,35 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
.text-#{$i} { font-size: 15px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
/section>
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
|
||||
@for $i from 1 to 6 {
|
||||
.text-#{$i} { font-size: 15px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,17 +2,54 @@
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用@if和@else将逻辑添加到您的样式
|
||||
forumTopicId: 301463
|
||||
localeTitle: 使用 @if 和 @else 为你的样式添加逻辑
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Sass中的<code>@if</code>指令对于测试特定情况很有用 - 它就像JavaScript中的<code>if</code>语句一样。 <blockquote> @mixin make-bold（$ bool）{ <br> @if $ bool == true { <br> font-weight：bold; <br> } <br> } </blockquote>就像在JavaScript中一样， <code>@else if</code>和<code>@else</code>测试更多条件： <blockquote> @mixin text-effect（$ val）{ <br> @if $ val == danger { <br>红色; <br> } <br> @else if $ val == alert { <br>颜色：黄色; <br> } <br> @else if $ val == success { <br>颜色：绿色; <br> } <br> @else { <br>颜色：黑色; <br> } <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Sass 中的<code>@if</code>指令对于测试特定情况非常有用--它的工作方式与 JavaScript</code>中的<code>if</code>语句类似。
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@if $bool == true {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
类似 JavaScript，你可以在 Sass 中使用<code>@else if</code>和<code>@else</code>添加更多条件：
|
||||
|
||||
```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;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>border-stroke</code>的<code>mixin</code> ，它接受一个参数<code>$val</code> 。 <code>mixin</code>应使用<code>@if</code> ， <code>@else if</code>和<code>@else</code>检查以下条件：
|
||||
<blockquote>光 - 1px纯黑色<br>中等 - 3px纯黑色<br>重 - 6px纯黑色 </blockquote>
|
||||
如果<code>$val</code>不是<code>light</ code>，<code>medium</code>，或者<code>heavy</code>，则边框应该设置为<code>none</code>。
|
||||
<section id='instructions'>
|
||||
创建一个名为<code>border-stroke</code>的<code>mixin</code>，它接受一个参数<code>$val</code>。<code>mixin</code>应使用<code>@if</code>，<code>@else if</code>和<code>@else</code>检查以下条件：
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
medium - 3px solid black
|
||||
heavy - 6px solid black
|
||||
```
|
||||
|
||||
如果 <code>$val</code> 不是 <code>light</code>、<code>medium</code> 或者 <code>heavy</code>，border 应该设置为 <code>none</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -20,15 +57,15 @@ localeTitle: 使用@if和@else将逻辑添加到您的样式
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的代码应该声明一个名为<code>border-stroke</code>的<code>mixin</code> ，它有一个名为<code>$val</code>的参数。
|
||||
- text: 你应该声明一个名为<code>border-stroke</code>的<code>mixin</code>，它有一个名为<code>$val</code>的参数。
|
||||
testString: assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
|
||||
- text: 你的<code>mixin</code>应该有一个<code>@if</code>语句来检查<code>$val</code>是否很亮，并将<code>border</code>设置为1px纯黑色。
|
||||
- text: <code>mixin</code>应该有一个<code>@if</code>语句来检查<code>$val</code>是否很轻，并将<code>border</code>设置为 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: 你的<code>mixin</code>应该有一个<code>@else if</code>语句来检查<code>$val</code>是否为中等，并将<code>border</code>设置为3px纯黑色。
|
||||
- text: <code>mixin</code>应该有一个<code>@else if</code>语句来检查<code>$val</code>是否中等，并设置<code>border</code>为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: 你的<code>mixin</code>应该有一个<code>@else if</code>语句来检查<code>$val</code>是否很重，并将<code>border</code>设置为6px纯黑色。
|
||||
- text: <code>mixin</code>应该有一个<code>@else if</code>语句来检查<code>$val</code>是否很重，并设置<code>border</code>为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: 你的<code>mixin</code>应该有一个<code>@else</code>语句来设置<code>border</code>为none。
|
||||
- text: <code>mixin</code>应该有一个<code>@else</code>语句来将<code>border</code>设置为 none。
|
||||
testString: assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
@ -54,7 +91,6 @@ tests:
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -66,8 +102,33 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
@mixin border-stroke($val) {
|
||||
@if $val == light {
|
||||
border: 1px solid black;
|
||||
}
|
||||
@else if $val == medium {
|
||||
border: 3px solid black;
|
||||
}
|
||||
@else if $val == heavy {
|
||||
border: 6px solid black;
|
||||
}
|
||||
@else {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
@include border-stroke(medium);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user