Nuclear Powered Marshmallows

    This package has been deprecated

    Author message:

    This feature is built-in as plugin now. Please use instead src/plugin/spritesheet of @hidoo/unit.

    @hidoo/unit-mixin-use-spritesheet

    0.5.0 • Public • Published

    @hidoo/unit-mixin-use-spritesheet

    Mixin for using spritesheet in @hidoo/unit framework.

    Installation

    $ npm install @hidoo/unit @hidoo/unit-mixin-use-spritesheet

    Usage

    @import "node_modules/@hidoo/unit/src/index.scss";
    @import "node_modules/@hidoo/unit-mixin-use-spritesheet/src/index.scss";

    Import with node-sass-magic-importer

    @import "~@hidoo/unit";
    @import "~@hidoo/unit-mixin-use-spritesheet";

    Usage for this mixin

    SCSS

    // import spritesheet variables
    @import "path/to/sprite/icon-image";
    
    // use mixin inside block
    .selector {
      @include use-spritesheet($type: "icon-image", $name: "logo");
    }

    CSS Outputs

    .selector-logo {
      /* spritesheet settings */
    }

    Supported format of spritesheet

    This mixin support following format of spritesheet.

    $sprites: (
      // output each by files of spritesheet
      "icon-image": (
        "image": "path/to/sprite/icon-image.png",
        "items": (
          // output each by items
          "logo": (
            "width": 10px,
            "height": 10px,
            "total-width": 30px,
            "total-height": 30px,
            "offset-x": -10px,
            "offset-y": -10px
          ),
          ...
        )
      ),
      ...
    );

    Usage with custom variables

    $custom-spritesheets: (
      "icon-image": (
        "image": "path/to/sprite/icon-image.png",
        "items": (
          "logo": (
            "width": 10px,
            "height": 10px,
            "total-width": 30px,
            "total-height": 30px,
            "offset-x": -10px,
            "offset-y": -10px
          )
        )
      )
    );
    
    // define hook that change to use $custom-spritesheets
    @function use-spritesheet-hook-resolve-spritesheets() {
      @if global-variable-exists("custom-spritesheets") {
        @return $custom-spritesheets;
      }
    
      @return null;
    }

    Usage with suffix of item state

    The state can be expressed by specifying the following suffix in the item name.

    Suffix Example State
    (None) example (Default)
    --focus example--focus Styles in :hover, :focus, .is-focus
    --disabled example--disabled Styles in :disabled, .is-disabled.
    --if-mobile example--if-mobile Styles at mobile viewport.
    --focus--if-mobile example--focus--if-mobile Styles in :hover, :focus, .is-focus at mobile viewport.
    --disabled--if-mobile example--disabled--if-mobile Styles in :disabled, .is-disabled at mobile viewport.

    When $options: ("toggle": false);

    Suffix Example State
    --current example--current Styles in .is-current.
    --current--if-mobile example--current--if-mobile Styles in .is-current at mobile viewport.

    When $options: ("toggle": true);

    Suffix Example State
    --selected example--selected Styles in :checked, .is-selected.
    --selected--focus example--selected--focus Styles in :checked:hover, :checked:focus :checked.is-focus, .is-selected:hover, .is-selected:focus .is-selected.is-focus.
    --selected--disabled example--selected--disabled Styles in :checked:disabled :checked.is-disabled, .is-selected:disabled .is-selected.is-disabled.
    --selected--if-mobile example--selected--if-mobile Styles in :checked, .is-selected at mobile viewport.
    --selected--focus--if-mobile example--selected--focus--if-mobile Styles in :checked:hover, :checked:focus, :checked.is-focus, .is-selected:hover, .is-selected:focus, .is-selected.is-focus at mobile viewport.
    --selected--disabled--if-mobile example--selected--disabled--if-mobile Styles in :checked:disabled, :checked.is-disabled, .is-selected:disabled, .is-selected.is-disabled at mobile viewport.

    API

    @function _use-spritesheet-get-sheet-by-type

    get sheet by type from values of spritesheets

    • Group: Spritesheets
    • Access: private

    Parameters

    Name Type Description Default
    $type String type of spritesheet -
    $spritesheets Map data of spritesheets ()

    Returns

    Map, Null

    Dependents

    • @mixin use-spritesheet use spritesheet settings

    @function _use-spritesheet-resolve-spritesheets

    resolve values of spritesheets

    • Group: Spritesheets
    • Access: private

    Returns

    Map, Null

    Dependents

    • @mixin use-spritesheet use spritesheet settings

    @mixin _use-spritesheet-define-responsive

    define responsive item

    • Group: Spritesheets
    • Access: private

    Parameters

    Name Type Description Default
    $name String name of spritesheet item -
    $items Map spritesheet items ()
    $options Map options ()

    Dependencies

    Dependents

    • @mixin use-spritesheet use spritesheet settings

    @mixin _use-spritesheet-define-toggle-responsive

    define responsive toggle item

    • Group: Spritesheets
    • Access: private

    Parameters

    Name Type Description Default
    $name String name of spritesheet item -
    $items Map spritesheet items ()
    $options Map options ()

    Dependencies

    Dependents

    • @mixin use-spritesheet use spritesheet settings

    @mixin _use-spritesheet-define-toggle

    define toggle item

    • Group: Spritesheets
    • Access: private

    Parameters

    Name Type Description Default
    $name String name of spritesheet item -
    $items Map spritesheet items ()
    $options Map options ()

    Dependencies

    Dependents

    • @mixin use-spritesheet use spritesheet settings

    @mixin _use-spritesheet-define

    define item

    • Group: Spritesheets
    • Access: private

    Parameters

    Name Type Description Default
    $name String name of spritesheet item -
    $items Map spritesheet items ()
    $options Map options ()

    Dependencies

    Dependents

    • @mixin use-spritesheet use spritesheet settings

    @mixin _use-spritesheet-set-properties

    set properties

    • Group: Spritesheets
    • Access: private

    Parameters

    Name Type Description Default
    $values Map values of item ()
    $use2x Boolean use 2x image or not false

    Dependents

    • @mixin _use-spritesheet-define-responsive define responsive item
    • @mixin _use-spritesheet-define-toggle-responsive define responsive toggle item
    • @mixin _use-spritesheet-define-toggle define toggle item
    • @mixin _use-spritesheet-define define item

    @mixin use-spritesheet

    use spritesheet settings

    • Group: Spritesheets
    • Access: public

    Parameters

    Name Type Description Default
    $type String type of spritesheet -
    $name String name of spritesheet item -
    $options Map options ()
    $options.use2x Boolean use 2x image or (one of true, false or "if-mobile") false
    $options.responsive Boolean responsive or not false
    $options.toggle Boolean toggle or not false
    $options.capturing-selectors List capturing parent selectors ("a", "button")

    Examples

    scss inputs

    // format of spritesheets values
    $sprites: (
       // output each by files of spritesheet
      "icon-image": (
        "image": "path/to/sprite/icon-image.png",
        "items": (
          // output each by items
          "logo": (
            "width": 10px,
            "height": 10px,
            "total-width": 30px,
            "total-height": 30px,
            "offset-x": -10px,
            "offset-y": -10px
          ),
          ...
        )
      ),
      ...
    );
    
    // use this
    .selector {
      @include use-spritesheet($type: "icon-image", $name: "logo");
    }

    css outputs

    .selector-logo {
      overflow: hidden;
      text-indent: -100%;
      color: transparent;
      background-image: url(path/to/sprite/icon-image.png);
    }
    .selector-logo {
      width: 10px;
      height: 10px;
      background-position: -10px -10px;
      background-size: 30px 30px;
    }

    Dependencies

    Test

    $ yarn test

    License

    MIT

    Install

    npm i @hidoo/unit-mixin-use-spritesheet

    DownloadsWeekly Downloads

    2

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    48.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • hidoo