config
variables
icons-defaults
$icons-defaults: (
// Space around sprites in generated spritemap.
// Useful with `$offset` parameter.
// This setting is global for all spritemaps.
// Can be set per spritemap with the `$spacing` parameter.
spacing: 0,
// Main icons directory. `sprite-map-create()`, base for sub dirs.
dir: "icons",
// Name of the png sub-folders.
dir-png: "png",
// Name of the hidpi png sub-folders.
dir-hidpi: "png_2x",
// Scale of the hidpi pngs.
hidpi-scale: 2,
// Minimum resolution ratio used in the hidpi media query.
hidpi-ratio: 1.3,
// Whether to embed icons as data URI in the `icon-single()` mixin.
single-embed: true,
// Default file format unless overridden by parameter, svg | png.
format: "svg",
// Whether to support legacy browsers, svg fallback.
legacy: true
);
Description
Default settings.
Type
Map
Map structure
Map keyName | Map keyDescription | Map keyType | Map keyValue |
---|---|---|---|
spacing | Space around sprites in generated spritemap | Number | 0 |
dir | Main icons directory. | String | 'icons' |
dir-png | Name of the png sub-folders | String | 'png' |
dir-hidpi | Name of the hidpi png sub-folders | String | 'png_2x' |
hidpi-scale | Scale of the hidpi pngs | Number | 2 |
hidpi-ratio | Minimum resolution ratio used in the hidpi media query | Number | 1.3 |
single-embed | Whether to embed icons as data URI in the | Boolean | true |
format | Default file format unless overridden by parameter, svg | png | String | 'svg' |
legacy | Whether to support legacy browsers, svg fallback | Boolean | true |
Used by
- [function]
conf
icons-settings
$icons-settings: () !default;
Description
User settings. Instanciate the same object in your stylesheets to override defaults.
Type
Map
Example
Override defaults
$icons-settings: (
dir: "assets",
hidpi-scale: 3
);
Used by
- [function]
conf
functions
[private] conf
@function conf($key) { ... }
Description
Retrieve a configuration item.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$key | configuration item key | String | —none |
Returns
Requires
- [variable]
icons-defaults
- [variable]
icons-settings
Used by
- [mixin]
hidpi-mq
- [mixin]
icon-generated
- [mixin]
icon-single
- [mixin]
icon
- [mixin]
sprite-map-create
helpers
functions
[private] _join
@function _join($list, $glue: '') { ... }
Description
Helper: join $list
into a string.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$list | the list to convert | List | —none |
$glue | a string to separate each element of the list | String | '' |
Returns
String
Used by
- [mixin]
icon-single
- [mixin]
icon
- [mixin]
sprite-map-create
[private] _sprite-map-get
@function _sprite-map-get($name, $factor: 1x) { ... }
Description
Helper: retrieve a spritemap.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$name | spritemap name | String | —none |
$factor | dpi factor | String | 1x |
Returns
Spritemap
Requires
- [variable]
icons-spritemaps
Used by
- [mixin]
icon-generated
- [mixin]
icon
[private] _sprite-position
@function _sprite-position($map, $sprite, $offset-x: 0, $offset-y: 0, $scale: 1) { ... }
Description
Helper: return correct spritemap background-position
.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$map | spritemap name | Spritemap | —none |
$sprite | sprite name | String | —none |
$offset-x | adjustment along the x axis | Number | 0 |
$offset-y | adjustment along the y axis | Number | 0 |
$scale | spritemap scale | Number | 1 |
Returns
List
—(x-pos y-pos)
Requires
- [external]
Compass::sprite-position
Used by
- [mixin]
icon
mixins
[private] hidpi-mq
@mixin hidpi-mq() { ... }
Description
Hidpi media query builder.
Parameters
None.
Requires
- [function]
conf
Used by
- [mixin]
icon-single
- [mixin]
icon
- [mixin]
sprite-map-create
Links
[private] generated
@mixin generated($width, $height, $top, $right, $bottom, $left) { ... }
Description
Boilerplate styles for generated content :before
or :after
.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$width | —none | Number | —none |
$height | —none | Number | —none |
$top | —none | Number | —none |
$right | —none | Number | —none |
$bottom | —none | Number | —none |
$left | —none | Number | —none |
Used by
- [mixin]
icon-generated
TODO's
Rewrite that crap
icons
mixins
icon-generated
@mixin icon-generated($map, $sprite, $pos: 'before', $centered: false, $format: conf(format)) { ... }
Description
Include the icon in a generated pseudo-element. Default to :before
. Allows for easier positioning or centering.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$map | spritemap name | String | —none |
$sprite | sprite name | String | —none |
$pos | pseudo-element position | String | 'before' |
$centered | whether to center the icon, relative to its parent | Bool | false |
$format | file format 'svg' | 'png' | String | conf(format) |
Output
Cross-browser icon as background-image.
Requires
- [function]
conf
- [function]
_sprite-map-get
- [mixin]
generated
- [mixin]
icon
- [external]
Compass::sprite-file
- [external]
Compass::image-width
- [external]
Compass::image-height
icon-single
@mixin icon-single($map, $sprite, $format: conf(format)) { ... }
Description
Embed a single icon as inline-image (no spritemap). Should be used sporadically.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$map | spritemap name | String | —none |
$sprite | sprite name | String | —none |
$format | file format 'svg' | 'png' | String | conf(format) |
Output
Cross-browser icon as background-image
Requires
icon
@mixin icon($map, $sprite, $offset: (0 0), $format: conf(format)) { ... }
Description
Main icon mixin, default choice unless there are specific needs.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$map | spritemap name | String | —none |
$sprite | sprite name | String | —none |
$offset | adjustment along the x y axis | List | (0 0) |
$format | file format 'svg' | 'png' | String | conf(format) |
Output
Cross-browser icon as background-image
Example
Include an icon
.twitter {
@include icon(social, twitter);
}
Requires
- [function]
conf
- [function]
_sprite-map-get
- [function]
_join
- [function]
_sprite-position
- [external]
Compass::inline-image
- [mixin]
hidpi-mq
Used by
- [mixin]
icon-generated
sprite-map-create
@mixin sprite-map-create($name, $spacing: conf(spacing)) { ... }
Description
Create a new spritemap from folder.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$name | spritemap name, which is also the folder name | String | —none |
$spacing | Whether to add space around sprites in generated spritemap | Number | conf(spacing) |
Example
Instantiate a new sprite map
@include sprite-map-create(social, $spacing: 30px);
Requires
- [function]
conf
- [function]
_join
- [mixin]
hidpi-mq
- [variable]
icons-spritemaps
- [external]
Compass::sprite-map
- [external]
Compass::sprite-path
- [external]
Compass::image-width
variables
[private] icons-spritemaps
$icons-spritemaps: ();
Description
Spritemaps storage.
Type
Map
Used by
- [function]
_sprite-map-get
- [mixin]
sprite-map-create