提高Sass水平的小技巧

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

本文由大漠根据Hugo Giraudel的《Tips to Help You Level Up Your Sass》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明原作者相关信息http://www.sitepoint.com/tips-help-level-up-sass/

——作者:Hugo Giraudel

——译者:大漠

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

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

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

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

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

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

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

返回一个值在列表中的位置,如果这个值不存在,将返回nullSass官方参考文档

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

@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的操作未经开发人员同意
  • 将会发生什么

这个用在一个列表中是非常有用的,因为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而不是使用一个简单的listargList是我们所说的技术数据类型的变量参数。

有时候混合宏或函数会带有不知数量的参数。例如,创建一个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最初是开发者为函数定义别名的。不要糟蹋你自己的代码了,如果仅为了方便而言的话,那样不值得。

结论

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

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文出处:http://www.sitepoint.com/tips-help-level-up-sass/

中文译文:http://www.w3cplus.com/preprocessor/tips-help-level-up-sass.html

Ultra Boost Clima

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/tips-help-level-up-sass.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部