Question

假设我想创建一个复杂的Sass @function，我该如何测试它并查看它返回的内容？

Answer 1

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

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

在终端中，使用sass my_stylesheet.scss
compass watch：如果使用Compass，保存文件时@debug将自动输出到您的终端。

我让a Sass @function called test帮助接近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);

如何在不使用dom的情况下测试Sass功能？

1 个答案: