Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.
/ sass-pass Public archive

5KB pure-scss unit-testing with insightful logs and debugging utilities

License

Notifications You must be signed in to change notification settings

matthias-t/sass-pass

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

sass-pass

GitHub code size in bytes npm contributions welcome

Why? start with why

Sass has a lot of complexity and a there are lots of ways things can go wrong. When a function is not found, for example, Sass interprets it as a string.

Unit testing asserts that everything is working as expected and lets you code freely and make changes without worrying about breaking things.

Existing Sass unit testing is too heavy and has too many dependencies, because it alters the way Sass compiles with gems and modules instead of using of native scss.

What?

Simple Sass unit tests:

  • lightweight (5KB)
  • pure scss 🎉 (yes, you read that correctly — no gem, no module, just 5KB of scss)
  • no dependencies
  • great logs
  • debugging utilities

Note: gulpfile.js is for development.

Install

npm install sass-pass --save-dev

Usage

@function add($a, $b) { @return $a + $b; }
@import 'node_modules/sass-pass/index';

@debug function('add');
@debug in(1, 2) + out(3);
@debug in(45px, 0.5px) + out(45.5px);
@debug in('a', 'b') + out('ab');
@debug in(1, 1) + out(3);
ADD
add(1, 2)  =>  3 (expected)
add(45px, 0.5px)  =>  45.5px (expected)
add('a', 'b')  =>  'ab' (expected)
WARNING: TEST FAILED, see below
add(1, 1)  =>  2 (expected 3)
@debug summary();
------------------------------------
=> TESTS PASSED: 3 / 4

You can also test non-function stuff, but you'll have to give up the pretty logs (that is, you'll probably have to look at the code to know what test failed)

@debug assert('divisions');
@debug in(1 / 2) + out(0.5);
@debug in(3.5 / 2) + out(1.75);
DIVISIONS
Got 0.5 (expected)
Got 1.75 (expected)

Utilities

info

$list: (1 2 3 4);
@debug info($list);
------------------------------------
INFO
Type:           list
Representation:
 - sass:        1 2 3 4
 - sass-pass:   (1 2 3 4)
Length:         4
List-separator: space
------------------------------------

compare

$other-list: (1, 2, 3, 'a', 5);
@debug compare($list, $other-list);
------------------------------------
COMPARE
Equal:  
 - sass:        false
 - sass-pass:   false
------------------------------------
Type:           list
Representation:
 - sass:        1 2 3 4  -VS-   1, 2, 3, a, 5
 - sass-pass:   (1 2 3 4)  -VS-   (1 2 3 'a' 5)
Length:         4  -VS-   5
List-separator: space  -VS-   comma
------------------------------------
@debug compare(1px, 1);
------------------------------------
COMPARE
Equal:
 - sass:        true
 - sass-pass:   false
------------------------------------
Type:           number
Representation:
 - sass:        1px  -VS-   1
 - sass-pass:   1px  -VS-   1
------------------------------------

l

Make single-element, space-separated sass lists.

@debug compare(l('a'), ('a',));

$empty-map

An empty sass map.

@debug info($empty-map);