如何在不使用dom的情況下測試Sass函數？

Question

假設我想創建一個複雜的Sass @function，我該如何測試它並查看它返回的內容？

Answer 1

在Sass中，您可以使用@debug，它「將SassScript表達式的值打印到標準錯誤輸出流。」

有兩種方法可以查看@debug的輸出。

1. 在你的終端，與sass my_stylesheet.scss

2. compass watch運行SASS文件：如果你使用指南針，@debug會在你的終端自動輸出，當你保存文件。

我做a Sass @function called test幫助方法TDD（測試驅動開發）薩斯功能我寫：

@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);