Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    rework-mixinspublic

    rework-mixins

    Rework CSS mixins.

    Example

    Using all mixing:

    var rework = require('rework');
    var rework_mixin = require('rework-plugin-mixin');
    var mixins = require('rework-mixins');
     
    var css = rework('some css here')
      .use(rework_mixin(mixins))
      .toString();

    Or specific mixing:

    var rework = require('rework');
    var rework_mixin = require('rework-plugin-mixin');
    var mixins = require('rework-mixins');
     
    var css = rework('some css here')
      .use(rework_mixin({
        overflow: mixins.overflow
      }))
      .toString();

    Mixins

    overflow: ellipsis

    mixins.overflow:

    h1 {
      overflow: ellipsis
    }

    yields:

    h1 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    border-radius

    mixins.border-radius:

    button {
      border-radius: top 5px bottom 10px
    }

    yields:

    button {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    absolute | relative | fixed

    mixins.{absolute,relative,fixed}:

    #logo {
      absolute: top left
    }

    yields:

    #logo {
      position: absolute;
      top: 0;
      left: 0
    }
    #logo {
      fixed: top 5px left 10px
    }

    yields:

    #logo {
      position: fixed;
      top: 5px;
      left: 10px
    }

    size

    mixins.size:

    #logo {
      size: 100px 50px
    }
    #icon {
      size: 32px
    }

    yields:

    #logo {
      width: 100px;
      height: 50px
    }
    #icon {
      width: 32px;
      height: 32px
    }

    License

    MIT

    install

    npm i rework-mixins

    Downloadsweekly downloads

    254

    version

    2.0.0

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar