@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";
node-sass-magic-importer
Import with@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. |
$options: ("toggle": false);
When Suffix | Example | State |
---|---|---|
--current |
example--current |
Styles in .is-current . |
--current--if-mobile |
example--current--if-mobile |
Styles in .is-current at mobile viewport. |
$options: ("toggle": true);
When 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
Dependents
- @mixin use-spritesheet use spritesheet settings
@function _use-spritesheet-resolve-spritesheets
resolve values of spritesheets
- Group: Spritesheets
- Access: private
Returns
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
- @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