sass-classnames
Sass implementation of classnames.
npm:
npm install @helioscompanies/sass-classnamesYarn (note that yarn add automatically saves the package to the dependencies in package.json):
yarn add @helioscompanies/sass-classnamesUsage
The class-names function takes any number of arguments which can be a string, list, arglist or map
(other types are ignored).
@debug class-names(foo, (bar: true), (baz, ted)); // .foo.bar.baz.tedKeywords
The class-names function supports any number of keywords.
If the value associated with a given keyword is falsy (is equal to false, null, 0 or an empty string),
that keyword won't be included in the output.
@debug class-names($foo: false, $bar: null, $baz: 0, $ted: ''); // null
@debug class-names($foo: true, $bar: 1, $bar: non-empty-string, $ted: #fff); // .foo.bar.baz.tedMaps
If the value associated with a given key is falsy, that key won't be included in the output.
@debug class-names((foo: false, bar: null, baz: 0, ted: '')); // null
@debug class-names((foo: true)); // .foo
@debug class-names((foo: true, bar: true)); // .foo.bar
@debug class-names((foo: true), (bar: true)); // .foo.barStrings
The string argument foo (or 'foo' or "foo") is short for (foo: true).
@debug class-names(foo, bar); // .foo.bar
@debug class-names("foo", "bar"); // .foo.bar
@debug class-names('foo', 'bar'); // .foo.bar
Lists
Lists will be recursively flattened as per the rules above:
@debug class-names(a, (b, (c: true, d: false))); // .a.b.cReal-world example:
@import "node-modules/@helioscompanies/sass-classnames/index";
#{ class-names(message) } { color: #000; }
#{ class-names(message, error) } { color: red; }
// .message { color: #000 }
// .message.error { color: red }
License
The sass-classnames package is open-sourced software licensed under the MIT license.