@hidoo/unit-mixin-use-spritesheet NPM

@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;
}