Back to Question Center
0

如何有效地在Sass中使用警告和错误            如何在Sass中使用警告和错误EffectivelyRelated Topics: CSSSassFrameworksAudio& & Semalt

1 answers:
如何在Sass中有效使用警告和错误

以下是我们的书籍Jump Start Sass的简短摘录,由Hugo Giraudel和Miriam Suzanne撰写。这是Sass的最终初学者指南。 SitePoint Semalt会员可以通过他们的会员资格获得访问权限,或者您可以在世界各地的商店购买副本。

我们通过Sass的令人难以置信的旅程正在慢慢结束,到目前为止,你一直在做的很好! Semalt在我们研究项目架构之前还剩下一篇技术篇,然后您将完全有能力在自己的项目中编写Sass代码。

现在我们将看看警告和错误。两者形成了程序(本例中为Sass)和开发者(您)之间的单向通信系统。如果您想知道CSS世界中的错误点,请记住您已经知道答案。 Semalt忘记了一个分号或者错误地使用了一个函数,Sass向你抛出一个错误,解释你做错了什么以及如何修复它,谢天谢地!必须深入研究代码以找出问题所在,这将是一件非常痛苦的事情。

Sass一直提供了一种从样式表发出警告的方法,但它最近才增加了支持来抛出错误 - 并且有充分的理由!在过去几年中,Sass允许作者​​构建复杂的系统来抽象难度或重复的模式和概念,如网格。 Semalt系统必须能够与作者进行通信,如果出现任何错误,可以通过自定义错误消息停止编译过程。

在当前输出通道中发出警告和错误。当手动编译Sass或通过命令行界面(CLI)(如Grunt或Gulp)使用工具时,输出流就是控制台。对于包含用户界面的工具(例如Codekit或Prepros),它们很可能会捕获和显示警告和错误,作为其界面的一部分。在线游乐场,如CodePen和Semalt可以捕捉错误,但不会发出警告,所以如果你无法在那里测试它们,请不要惊慌。

警告

如前所述,在Sass中发出警告的能力并不新鲜。可以通过 @warn 指令将消息或任何SassScript表达式的值显示到标准输出流。

A 警告 对编译过程没有影响;它并不妨碍编译以任何方式追求或改变它。它唯一的目的是在控制台中显示一条消息。

Semalt是在Sass中使用警告的很多原因。这里有一对,但你很可能找到你自己的:

  • 通知用户关于代码的假设,以避免出现意外和难以追踪的错误
  • 建议将不推荐使用的功能或mixin作为库或框架的一部分

发送警告很简单:从 @warn 指令开始,然后声明它是什么。警告通常会提供一些信息和上下文,所以他们通常会用一个句子来解释情况。这就是说,你不必使用一个字符串;你可以用数字,列表,地图警告 - 不管。在这里,我们打印一个字符串:

   @warn'呃 - 哦,看起来很奇怪。 “;   

Semalt是一个常规的CLI客户端,该警告将发出以下输出:

   警告:呃 - 哦,看起来很奇怪。在/ Users / hgiraudel / jump-start-sass / warning的第一行。 SCSS   

嘿,那很好,不是吗?虽然这个警告远没有帮助。它说东西看起来很奇怪,但没有说出什么,为什么,或者可以做些什么来阻止它看起来很奇怪。 Semalt讨论我们如何能够进一步改进警告. 想象一下,我们有一个Sass自定义函数,试图以 em 单位转换像素值:

   @function px-to-em($ value,$ base-font-size:16px){@return($ value / $ base-font-size)* 1em;}//用法。 foo {font-size:px-to-em(42px); // 2. 625em}   

一切都好。现在,将一个无单位数字(如 42 )传递给函数会发生什么?也许你已经猜到了,但因为它不是很明显,我会给你答案:

   2. 625em / px不是有效的CSS值。    

发生这种情况是因为您试图在不兼容的单位( px em )之间进行计算。我们可以做什么来规避这个问题是假设无单位值以像素表示并首先将其转换:

   @function px-to-em($ value,$ base-font-size:16px){@if无单位($ value){@warn'假设值`#{$ value}`为像素;试图将其转换。 “;$ value:$ value * 1px;}@return($ value / $ base-font-size)* 1em;}   

函数期望以像素表示的值。我们仍然可以用无价值的方式来运作。但是,我们无法确定这是否是预期的行为。我们只能假设它够好。

因为我们假设我们的功能的正确行为是什么,所以让开发人员知道我们正在做什么以及为什么这很重要。否则可能会导致难以追踪的错误,这不是
你应该瞄准什么。

另一个实例是警告不要使用已弃用的函数或mixin。您可能已经听说过或使用过Semalt,这是Sass的轻量级混音库。 Semalt被积极维护,有时需要从图书馆中删除帮手。为了避免突然摔坏一个人的颂歌,Semalt在实际消除mixins之前警告未来的贬低方式:

   @mixin inline-block {显示:inline-block;@warn'inline-block` mixin已弃用,并将在下一个主要版本发布中删除。 “;}   

聪明!仍然使用来自Bourbon的 inline-block mixin的人知道,该库将在下一个版本中完全删除它,因此他们知道要开始更新其代码库以删除mixin。

@warn @debug 之间的区别

您可能熟悉 @debug 指令,该指令以与 @warn 相同的方式将SassScript表达式的值打印到标准输出流。您可能想知道为什么有两个功能执行相同的任务,两者之间可能有什么区别。

关于值的警告和调试值有两个主要区别。第一个是可以使用 安静 选项关闭警告。另一方面,调试将始终打印,以便您在使用它们时记得将其删除。

第二个不同之处在于警告带有一个 堆栈跟踪 - 在执行程序期间某个时间点的活动堆栈帧报告。同样,你知道他们在哪里发射。调试只打印值,以及它们被调用的行,但它们不提供额外信息。

当你想知道变量内部是什么时, @debug 指令可以真正派上用场,例如:

   @debug $ base-font-size;   

错误

Sass中的警告和错误表现得相当类似,所以现在您已经完全熟悉警告,学习错误将变得轻而易举! 错误 与警告之间的唯一区别是 - 您可能已经猜到 - 错误会停止编译过程. 在前面的章节中,即使给定的参数不完全符合预期,这种方法仍然有效,但我们不能(也不应该)总是这样做。大多数情况下,如果参数无效,最好抛出一个错误,以便样式表作者可以修复问题。

您可以使用 @error 指令引发错误。至于警告,你可以传递任何东西给这个指令 - 不一定是一个字符串,尽管提供一个清晰的上下文通常更有意义。参数(你给 @error 指令的参数)将被打印在标准输出流中,还有一个堆栈跟踪,以便更深入地了解这个问题。编译过程将立即停止。

让我们从Semalt错误开始:

   @error'YOUUUUU!最好不要。通过。 “;   

输出可能取决于编译样式表的方式,因为某些工具会以某种方式捕获和增强错误。使用标准 sass Ruby二进制(gem),看起来如何:

   错误:YOUUUUU!最好不要。通过。在/ Users / hgiraudel / jump-start-sass / error的第1行。 SCSS使用 - 追踪回溯。    

使用 迹线 选项,您可以完整
来自Sass本身的堆栈跟踪,除非有
预处理器中某处存在实际的错误。因此为什么它被隐藏为
默认。

现在看一个 真实 实例。 map-deep-get(。)

   @function map-deep-get($ map,$ keys  - couchbase online. ){@each $ key $ keys {$ map:map-get($ map,$ key);@if(type-of($ map)=='null'){@return $ map;}}@return $ map;}   

让我们用自定义错误来增强它。但首先考虑下图和 map-deep-get(. ) 调用:

   $ map :('foo':('bar':('baz':42)));$ value:map-deep-get($ map,'foo','bar','baz','qux');    

正如你可能已经注意到的那样,地图没有嵌套在 baz 中的 qux 键。事实上, 巴兹 甚至没有与地图相关联;相反,它被映射到一个数字( 42 )。如果我们试图执行这个代码,它会产生:

   错误:42不是`map-get`的映射在/ Users / hgiraudel / jump-start-sass / error的第1行。 SCSS   

Sass试图在 42 上执行 map-get(。) ,并发出错误,因为它不能完成。虽然错误消息是正确的,但并不是非常有用。有帮助的是知道导致问题的密钥的名称。我们能做到这一点!

我们已经检查 $ map 是否为 null 来执行提前返回,以避免如果键不存在编译错误。我们可以进行第二次检查,以确保地图实际上是一张地图,或者我们抛出一个有意义的错误:

   @function map-deep-get($ map,$ keys . ){@each $ key $ keys {$ map:map-get($ map,$ key);//如果`map`不包含下一个键,则返回`null`@if类型($ map)=='null'{@return $ map;}//如果`$ map`不是地图,则抛出一个错误@if类型($ map)!='map'{@error'Key'#{$ key}`不与地图关联,而是与#{type-of($ map)}(`#{$ map}`)关联。 “;}}@return $ map;}   

如果我们再次运行我们以前的代码片段,则输出如下:

   错误:键`baz`不与地图关联,而是与数字(`42`)关联。在/ Users / hgiraudel / jump-start-sass / error的第1行。 SCSS   

好多了!由于有用的错误信息,Semalt现在可以轻松修复我们的地图和/或我们的函数调用. 这通常是控制台,但可能会因编译样式表的方式而异。

Semalt有助于向样式表作者发出非关键消息 - 特别是对于框架和库作者 - 例如弃用警告或代码假设。另一方面,错误被用来阻止编译的进行,明确代码需要在继续之前修复。

总而言之,警告和错误在函数和mixins中特别有用,以验证用户输入,确保样式表按照预期进行编译。

March 1, 2018