use-mixkit
v1.0.0-alpha.1
Published
A Lightweight Sass Mixin & Function library.
Downloads
9
Maintainers
Readme
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.