mxkit/README.md

A Lightweight Sass Mixin & Function library.

# 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

```scss
// 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

```scss
// File: _mixkit.scss

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

```scss
// 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

```scss
// File: _mixkit.scss

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

```scss
// File: main.scss

@use "mixkit" as mk;

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

**Cons:**

- Requires distinct globally distinct method naming.

***