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，轻量
• 可随处使用，可配置
• 容易扩展

这些是适用于全部组件的规则。