提高Sass水平的小技巧
本文由大漠根据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框架上,很多人都喜欢使用多个参数。
比方说,你要检测一个值是initial
,inherit
还是auto
。大多数的写法都像这样写:
@if $value == "initial" or $value == "inherit" or $value == "auto" {
// Then do something
}
虽然这个能正常的工作,但他真的好丑,而且还要写那么多的代码。如果我们用index()
函数来替代呢?
返回一个值在列表中的位置,如果这个值不存在,将返回
null
。Sass官方参考文档
我们使用这种方法来更新前面的示例:
@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
而不是使用一个简单的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最初是开发者为函数定义别名的。不要糟蹋你自己的代码了,如果仅为了方便而言的话,那样不值得。
结论
正如你所看到的,把你的代码变得更有吸引力,这些都是小事情。当你有时间和关心一个项目时,这一切都可以做到。如果你的感觉告诉你这样做要以清理你的代码,让你的代码更整洁,那么这一切都值得你去做。
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载烦请注明出处:
英文出处:http://www.sitepoint.com/tips-help-level-up-sass/
中文译文:https://www.fedev.cn/preprocessor/tips-help-level-up-sass.html
Ultra Boost Clima