提高 Sass 水平的小技巧

Question

写代码是件很困难的事。有很多陷阱需要注意，为了避免这些总还是有改进的余地。使用 Sass 使编写 CSS 困难少了一点。除非你做错了，在这种情况之下，CSS 会变得更糟糕。

为了避免这种情况，我想与大家分享一些 Sass 的技巧来帮助你写出更好的 Sass。

使用 index() 比使用多个参数要更好

我喜欢阅读 Sass 代码。我可以花数小时在Github中挖掘Sass代码库。我经常看到，尤其是在 Sass 框架上，很多人都喜欢使用多个参数。

比方说，你要检测一个值是 inherit 还是 auto。大多数的写法都像这样写：

@if $value=wenjiangs="initial" or $value=wenjiangs="auto" {
  // Then do something
}

虽然这个能正常的工作，但他真的好丑，而且还要写那么多的代码。如果我们用index()函数来替代呢？

返回一个值在列表中的位置，如果这个值不存在，将返回 null。

我们使用这种方法来更新前面的示例：

@if index("initial" "inherit" "auto", $value) {
  // Then do something
}

有些人认为index()函数返回的是一个数值而不是一个布尔值，我们不应该这样使用。这确实是一种选择。如果我们只需要确认他返回的值不是null的话，这样做法真的很好，但是你真的希望他返回的是一个布尔值，你也可以这样做：

@if not not index("initial" "inherit" "auto", $value) {
  // Then do something
}

你可能知道在JavaScript中如何将一个值转换成布尔值：!!value。这是完全相同的事情，但使用的是not。在需要将值转换成布尔值的前面插入not，同时也反值返转了。在前面再加一个not，他依然还是布尔值，而且值又反转一次和以前的值保持一样的意思。

在我们这个示例中，将会用true或者false来替代三个值中任何值返回的数字或者不存在返回的null。同样，在这种情况下，他不会添加任何的初始值。

如果你担心这样会降低当初的表达式意思，你可以这样定制一个函数：

@function is($value, $values) {
  @return not not index($values, $value);
}

或者：

@if is($value, "initial" "inherit" "auto") {
  // Then do something
}

再一次强调，我的意思是：能用index()函数替代的地方就不要使用多个参数。

使用 @warn

Sass开发者常常忽略 Sass 的一个新特性，那就是@warn命令。这是一件糟糕的事情，因为@warn命令可以让你直接从编译Sass的控制台上输出信息：

@warn指令可以通过 SassScript 打印出错误的信息。这对于库的创建非常有用，可以提醒用户或开发者不支持或使用混合宏错误的信息。

这是一个很有用的工具，可以提醒开发人员：

• 潜在的错误
• 用法
• Sass的操作未经开发人员同意
• 将会发生什么

这个用在一个列表中是非常有用的，因为Sass没有@error指令。因此，你可以在mixin/function中检查他们的参数是否正确。如果不正确，可以提醒开发者。例如：

@function color($color) {
  @if not map-has-key($colors, $color) {
    @warn "No color found for `#{$color}` in `$colors` map.";
  }

  @return map-get($colors, $color);
}

注：有关于Sass的错误信息处理，我在Tuts＋网站上发表了一篇文章，深入的做了剖析。

有关于@warn的用例，可以在一些Sass库的mixin见到，比如 Bourbon

@mixin inline-block {
  display: inline-block;
  @warn "inline-block mixin is deprecated and will be removed in the next major version release";
}

在Sass-MQ中使用了@warn来告诉开发者：试图将一个没有单位的值转换成em长度值。可能会考虑这样做：

@function mq-px2em($px, $base-font-size: 16px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return mq-px2em($px + 0px); // That may fail.
  } @else if (unit($px) == em) {
      @return $px;
    }
  @return ($px / $base-font-size) * 1em;
}

我也可以这样的认为，在混合宏中，可以打印出他的一些得要的参数，用来告诉开发者哪些参数是必须加载的。

对于未知参数数量使用argList

当你创建一个函数或者混合宏时，他可以接受任何长度值的一个列表。你应该使用一个argList而不是使用一个简单的list。argList是我们所说的技术数据类型的变量参数。

有时候混合宏或函数会带有不知数量的参数。例如，创建一个box-shadow的混合宏，他有多个阴影参数。对于这些情况，Sass支持变量参数。混合宏或函数将使用一个列表参数，后面的参数将以...代表。请参阅官方文档。

为什么argList更好？从技术的角度来说，他不一定更好。不管是list还是argList，他们的操作都是相同，那么为什么要这么麻烦呢？

简而言之，这又意味着什么呢？使用argList时，表示你可以使用无限制数量的变量，不用检查argList长度。而对于一个list来说，只是将几个值放在同一个变量中，他可以是两个，也可能是三个，或者是四个。任何具体的数字。像这样：

// Function doing something with a key/value pair from a map
// ---
// @param [list] $pair: key/value pair
// ---
@function map-key-value-pair($pair) {
  @if not length($pair) == 2 {
    @warn "`map-key-value-pair` function is expecting a list of 2 items, #{length($pair)} given.";
    @return false;
  }

  // Then do something
}

另一个方面，在这个时候你可能只想使用argList而不是list：

// Returns the highest value
// ---
// @param [argList] $values: numbers
// ---
@function max($values...) {
  $max: nth($values, 1);

  @for $i from 2 through length($values) {
    $value: nth($values, $i);
    @if $value > $max {
      $max: $value;
    }
  }

  @return $max;
}

在这种情况之下，使用一个list可能没有多大意义，但使用argList使函数更有意义。这几乎是一个语义化的问题。

使用别名

这是用来创建框架、网格系统、Compass扩展或其他不知名的Sass功能扩展。当你创建一个API时，尽量将他们描述清楚。如果你的混合宏或函数名字过长，没有关系，只要让他们更具有语义化。

但你不想一遍又一遍使用较长的函数名时，可以使用别名。然后由开发人员自行决定，是使用长名字的还是使用别名。

例如：

@function get-configuration($option) {
  @return map-get($global-configuration, $option);
}

明显的get-configuration()函数名好长。所以需要一个别名，返回的结果是get-configuration():

@function conf($opt) {
  @return get-configuration($opt);
}

那就这样吧。API最初是开发者为函数定义别名的。不要糟蹋你自己的代码了，如果仅为了方便而言的话，那样不值得。

结论

正如你所看到的，把你的代码变得更有吸引力，这些都是小事情。当你有时间和关心一个项目时，这一切都可以做到。如果你的感觉告诉你这样做要以清理你的代码，让你的代码更整洁，那么这一切都值得你去做。