Neo's Personal Matrix

    @helioscompanies/sass-classnames

    1.0.2 • Public • Published

    sass-classnames

    Version

    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.

    Install

    npm i @helioscompanies/sass-classnames

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    5.59 kB

    Total Files

    4

    Last publish

    Collaborators

    • sjs.master
    • alexander-shipilov
    • gansbrest