diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.chinese.md index 230cbe29ef..f4b4095c0f 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.chinese.md @@ -7,7 +7,7 @@ localeTitle: 使用Mixins创建可重用的CSS --- ## Description -
在Sass中， 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）;
}
+
在Sass中， 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）;
}
## Instructions
为border-radius写一个mixin并给它一个$radius参数。它应该使用示例中的所有供应商前缀。然后使用border-radius mixin为#awesome元素提供15px的边界半径。