2.0 KiB
2.0 KiB
| id | title | challengeType | forumTopicId |
|---|---|---|---|
| 587d7dbe367417b2b2512bb8 | 使用 @if 和 @else 为你的样式添加逻辑 | 0 | 301463 |
--description--
Sass 中的@if指令对于测试特定情况非常有用--它的工作方式与 JavaScript中的if语句类似。
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
类似 JavaScript，你可以在 Sass 中使用@else if和@else添加更多条件：
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
--instructions--
创建一个名为border-stroke的mixin，它接受一个参数$val。mixin应使用@if，@else if和@else检查以下条件：
light - 1px solid black
medium - 3px solid black
heavy - 6px solid black
如果 $val 不是 light、medium 或者 heavy，border 应该设置为 none。
--hints--
你应该声明一个名为border-stroke的mixin，它有一个名为$val的参数。
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
mixin应该有一个@if语句来检查$val是否很轻，并将border设置为 1px 纯黑色。
assert(
code.match(
/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi
)
);
mixin应该有一个@else if语句来检查$val是否中等，并设置border为3px 纯黑色。
assert(
code.match(
/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi
)
);
mixin应该有一个@else if语句来检查$val是否很重，并设置border为6px 纯黑色。
assert(
code.match(
/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi
)
);
mixin应该有一个@else语句来将border设置为 none。
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));