sass-classnames

Sass implementation of classnames.

Install with npm or Yarn:

npm:

npm install @helioscompanies/sass-classnames

Yarn (note that yarn add automatically saves the package to the dependencies in package.json):

yarn add @helioscompanies/sass-classnames

Usage

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.ted

Keywords

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.ted

Maps

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.bar

Strings

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.c

Real-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.