2.4 KiB
2.4 KiB
id | title | challengeType | forumTopicId |
---|---|---|---|
587d7dbd367417b2b2512bb6 | 用 Mixins 创建可重用 CSS | 0 | 301455 |
--description--
在 Sass 中,mixin
是一组 CSS 声明,可以在整个样式表中重复使用。
CSS 的新功能需要一段时间适配后,所有浏览器后才能完全使用。随着浏览器的不断升级,使用这些 CSS 规则时可能需要添加浏览器前缀。比如 "box-shadow":
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
是可选的。 现在,只要在需要的地方使用@include
调用上面定义的mixin
,就可以自动添加好所有的浏览器前缀:mixin
使用@include
指令调用:
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
--instructions--
为border-radius
写一个mixin
,并给它一个$radius
参数。它应该使用示例中的所有浏览器前缀,然后使用border-radius mixin
为#awesome
元素提供 15px 的边框半径。
--hints--
你应声明名为border-radius
的mixin
,其中包含名为$radius
的参数。
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
你应该给$radius
添加-webkit-border-radius
浏览器前缀。
assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
你应该给$radius
添加-moz-border-radius
浏览器前缀。
assert(code.match(/-moz-border-radius:\s*?\$radius;/gi));
你应该给$radius
添加-ms-border-radius
浏览器前缀。
assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
你应该给$radius
添加border-radius
。
assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4);
你应使用@include
关键字调用border-radius mixin
,并将其设置为 15px。
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));