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

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

• @mixin _use-spritesheet-set-properties

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

• @mixin _use-spritesheet-set-properties

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

• @mixin _use-spritesheet-set-properties

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

• @mixin _use-spritesheet-set-properties

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

• @function _use-spritesheet-resolve-spritesheets
• @function _use-spritesheet-get-sheet-by-type
• @mixin _use-spritesheet-define
• @mixin _use-spritesheet-define-responsive
• @mixin _use-spritesheet-define-toggle
• @mixin _use-spritesheet-define-toggle-responsive

Test

$ yarn test

License

MIT