Mixkit

Collection of useful Sass mixins and functions.

SASS Error

https://github.com/sass/dart-sass/blob/master/lib/src/visitor/evaluate.dart

Using Mixkit

Loadpaths

A load-path is required for Sass to correctly include Mixkit modules. A load-path is defined using --load-path | -I.

• NPM --load-path=node_modules/sass-mixkit/src/mixkit
• Yarn --load-path=yarn_modules/sass-mixkit/src/mixkit
• Custom --load-path=YOUR_CUSTOM_PATH/sass-mixkit/src/mixkit

Compile examples

• NPM sass --watch main.scss --load-path=npm_modules/sass-mixkit/src/mixkit
• Custom sass --watch main.scss --load-path=vendor/sass-mixkit/src/mixkit

Courier file

Approach #1: @use namespacing

// File: main.scss

@use "mixkit/validate" as val;
@use "mixkit/property" as prop;

// Usage
val.type("Hello world");
prop.display(flex);

Appraoch #2: @forward namespacing

// File: _mixkit.scss

@forward "validate" as val-*;
@forward "property" as prop-*;

// File: main.scss

@use "mixkit" as *;

val-type("Hello world");
prop-display(flex);

Cons:

• Identical method names can be used, but not called without prefix. Identical methods called without prefix refer to most recently called.

Appraoch #3: Global mk namespace

// File: _mixkit.scss

@forward "validate";
@forward "property";

// File: main.scss

@use "mixkit" as mk;

// Usage
mk.type("Hello world");
mk.display(flex);

Cons:

• Requires distinct globally distinct method naming.