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
StringUsed 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
SpritemapRequires
- [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