Sass->十分钟写一个Sass组件

原文：https://www.sitepoint.com/sass-component-10-minutes/

现在一些开发者认为，把具有特定功能的代码片段独立出来，互相组合，去开发网站或应用，这是一种很好的方式。也就是组件化，但是实现起来却没有那么容易。

一个好的示例让人豁然开朗, 我选取的示例是几乎每个网站或应用都具有的交互组件：信息提示。

通过写一个具有不同信息类型的提示组件，会有助于提升你的Sass。那就让我们开始动手吧。

定义提示颜色

我们需要什么，信息。什么样式的信息？让我们参照一下具有这个组件的框架：Bootstrap。Bootstrap定义了四种类型的提示信息：

• 验证
• 错误
• 警告
• 信息

看起来挺适合我们用来作为参考。在生活中我们会用不同的语调去表达不同的情感，同理，我们可以在网站上用不同的颜色去显示不同类型的信息。四种类型的提示，每个都有自己的颜色。让我们再一次借用一下Bootstrap的做法，定义我们提示的颜色：

• 绿色表示成功
• 红色表示错误
• 黄色或者橘黄色表示警告
• 浅蓝色表示信息，说明

基本样式

所有的信息都有一些公共的样式，如 padding, margins, 也可能会有排版样式。最后，唯一不同的样式是表示不同提示的颜色。

让我们先写一个placeholder:

%message {
  padding: .5em;
  margin-bottom: .5em;
  border-radius: .15em;
  border: 1px solid;
}

第一个要注意的事情是：我们没有设置任何字体样式，如大小，字体，或者行高。因为使用这个模块的项目，一般都已经设置了这些通用的样式。现在这样，会让我们的组件更加独立化。

我们也没有设置边框的颜色。border-color这个属性的默认值是currentcolor。在大多浏览器中，是黑色。

现在开始写一个mixin：

@mixin message($color) {
  @extend %message;
  color: $color;
  border-color: lighten($color, 20%);
  background: lighten($color, 40%);
}

就像你所看到的，mixin做了两件事情：

1. 它设置了一个关于color的属性，通过参数把一个颜色值传递进来。然后设置了color,border-color这两个属性，很感谢Sass的lighten颜色函数。使用Sass的颜色操作函数有助于减少mixin需要输入的参数数量。

2. 继承%message这个placeholder，所以你不用在每个信息类型中去重复书写这些样式了。这样一来，代码非常符合DRY原则。

调用mixin

到现在为止，已经完成的差不多了。还剩下的事情是调用mixin，为不同类型的提示信息传入其对应的颜色参数值：

.message-error {
  @include message(#b94a48);
}

.message-valid {
  @include message(#468847);
}

.message-warning {
  @include message(#c09853);
}

.message-info {
  @include message(#3a87ad);
}

让组件可用性更强

我们现在做的已经相当整洁了。如果想增加一个新的提示类型，那需要做的只是@include message(你选择的颜色值)，在那个新的提示类型对应的class里边。但是我们能使组件代码更轻便适用吗？

把每个类型的提示和一个颜色映射对应起来，有一些好的方式吗？有：嵌套列表（Nested Lists）。通过创建一个二维列表，然后循环这些值，我们可以很容易做到。

$message-types: (
  (error    #b94a48)
  (valid    #468847)
  (warning  #c09853)
  (info     #3a87ad)
) !default;

@each $message-type in $message-types {
  $type:  nth($message-type, 1);
  $color: nth($message-type, 2);

  .message-#{$type} {
    @include message($color);
  }
}

现在Sass生成的代码和我们上边写的效果一样。你可以把变量列表放到样式表的顶部或者一个配置文件中去，这样的话，增删改一个信息类型将会很方便容易。

提醒：如果你打算将这个组件添加到某个库或者框架中去，那么!default标记（$message-types这个变量中使用的）将会让你很容易去覆盖这个变量，如果你有这个需求的话。

使用map（Sass 3.3）

我们可以使用Sass 3.3中新增的数据类型：Maps。Maps就像PHP中的关联数组，或者javascript中的对象。他们都是键值对映射。

$message-types: (
  error   :  #b94a48,
  valid   :  #468847,
  warning :  #c09853,
  info    :  #3a87ad
) !default;

@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
  }
}

很爽吧。

优雅的错误处理

经常被Sass开发者们忽略的一件事情是：优雅地处理错误的能力。你应该保证自定义的函数和mixins中传入的参数值是正确的，如果不正确，那么要提供警告信息。比起让Sass自己去处理这些错误好多了。

在这个示例里边，我们需要保证$color这个参数的值必须是一个颜色值。

@mixin message($color) {
  @if type-of($color) == color {
    @extend %message;
    color: $color;
    border-color: lighten($color, 20%);
    background: lighten($color, 40%);
  }

  @else {
    @warn "#{$color} is not a color for `message`.";
  }
}

现在这样的话，就能够保证当mixin接受到一个非颜色的参数值时，Sass不会崩溃掉。另外，它也能帮助开发者知道这是由无效参数引发的错误。

最后的话

在30行的SCSS里边，我们写出了这样的组件：

• 干净，好懂
• DRY，轻量
• 可随处使用，可配置
• 容易扩展

这些是适用于所有组件的规则。