mxkit

1.0.0-alpha.1 • Public • Published

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/mixkit/src/mixkit
  • Yarn --load-path=yarn_modules/mixkit/src/mixkit
  • Custom --load-path=YOUR_CUSTOM_PATH/mixkit/src/mixkit

Compile examples

  • NPM sass --watch main.scss --load-path=npm_modules/mixkit/src/mixkit
  • Custom sass --watch main.scss --load-path=vendor/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.

Package Sidebar

Install

npm i mxkit

Weekly Downloads

0

Version

1.0.0-alpha.1

License

MIT

Unpacked Size

3.83 kB

Total Files

4

Last publish

Collaborators

  • eliasearlym