如何在不使用dom的情况下测试Sass函数？

假设我想创建一个复杂的Sass@函数，如何测试它并查看它返回什么？

在Sass中，您可以使用它，“将SassScript表达式的值打印到标准错误输出流。”

有两种方法可以查看@debug的输出

在终端中，使用

sass my_stylesheet.scss运行sass文件

compass watch

：如果您使用compass，当您保存文件时，@debug将自动在终端中输出

我试图帮助实现TDD（测试驱动开发）Sass功能，我写道：

@function test($statement, $assertion, $expectation) {
  @if $assertion != $expectation {
    $result: "FAIL";
    @return "____ #{$result} ____ " + $statement + " ____ Expected #{$assertion} to equal EXPECTATION: #{$expectation}";
  }
  @if $assertion == $expectation {
    $result: "PASS";
    @return "____ #{$result} ____ " + $statement;
  }
}

// example usage

@debug test("draw_pixel creates box-shadow based off of $width", draw_pixel(1, $hair),"6px 0px #090909");

@debug test("draw_pixel creates a number of box-shadow css output equal to the length", draw_pixel(3, $hair),"18px 0px #090909");

@debug test("function DRAW_LINE: creates box-shadow based off of $width", draw_line(0, 1, $hair), "6px 0px #090909");

@debug test("draw_line creates a number of box-shadow css output equal to the length",draw_line(3, 3, $hair),"24px 0px #090909,30px 0px #090909,36px 0px #090909");

@debug test("draw_row draws a pixel for each block", draw_row(4, $lengths: (2,1,2), $colors: ($hair, $crown-gold, $hair)), "30px 0px #090909,36px 0px #090909,42px 0px #f5d858,48px 0px #090909,54px 0px #090909");

//Compass output
// >>> Change detected at 20:56:35 to: superman_gif.scss
// /Users/benjaminangel/programming/personal_apps/talkativetree/views/sass/superman_gif.scss:36 DEBUG: ____ PASS ____ adjust converts number of blocks into pixel equivaent
// /Users/benjaminangel/programming/personal_apps/talkativetree/views/sass/superman_gif.scss:42 DEBUG: ____ PASS ____ draw_pixel creates box-shadow based off of $width
// /Users/benjaminangel/programming/personal_apps/talkativetree/views/sass/superman_gif.scss:45 DEBUG: ____ PASS ____ draw_pixel creates a number of box-shadow css output equal to the length
// /Users/benjaminangel/programming/personal_apps/talkativetree/views/sass/superman_gif.scss:57 DEBUG: ____ PASS ____ function DRAW_LINE: creates box-shadow based off of $width
// /Users/benjaminangel/programming/personal_apps/talkativetree/views/sass/superman_gif.scss:59 DEBUG: ____ PASS ____ draw_line creates a number of box-shadow css output equal to the length
// /Users/benjaminangel/programming/personal_apps/talkativetree/views/sass/superman_gif.scss:81 DEBUG: ____ PASS ____ draw_row draws a pixel for each block

// or broken up to be more readable

//template

$state: "";
$assert: "";
$expect: "";

@debug test($state, $assert, $expect);

// usage

$state: "draw_row draws a pixel for each block";
$assert: draw_row(4, $lengths: (2,1,2), $colors: ($hair, $crown-gold, $hair));
$expect: "30px 0px #090909,36px 0px #090909,42px 0px #f5d858,48px 0px #090909,54px 0px #090909";

@debug test($state, $assert, $expect);

---

您应该检查文档。当您编写函数时，它将根据您编写函数的目的返回一个值。文档与您正在编写的函数没有任何关系：/