freeCodeCamp/create-reusable-css-with-mixins.chinese.md at 087946adc15e2d3a4006e87ca1b441741b8b57ba

Files

ZhichengChen 087946adc1 fix(i18n): update Chinese translation of sass (#38595 )

Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>

2020-09-07 13:41:08 +05:30

3.6 KiB

Raw Blame History

id, title, challengeType, forumTopicId, localeTitle

id	title	challengeType	forumTopicId	localeTitle
587d7dbd367417b2b2512bb6	Create Reusable CSS with Mixins	0	301455	用 Mixins 创建可重用 CSS

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 的边框半径。

Tests

tests:
  - 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>浏览器前缀。
    testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
  - 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>浏览器前缀。
    testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
  - 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。
    testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));

Challenge Seed

<style type='text/sass'>



  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;

  }
</style>

<div id="awesome"></div>

Solution

<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>

3.6 KiB Raw Blame History Unescape Escape