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 keyNameMap keyDescriptionMap keyTypeMap keyValue
spacing

Space around sprites in generated spritemap

Number0
dir

Main icons directory. sprite-map-create[], base for sub dirs

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

Number2
hidpi-ratio

Minimum resolution ratio used in the hidpi media query

Number1.3
single-embed

Whether to embed icons as data URI in the icon-single[] mixin

Booleantrue
format

Default file format unless overridden by parameter, svg | png

String'svg'
legacy

Whether to support legacy browsers, svg fallback

Booleantrue

Used by

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

functions

[private] conf

@function conf($key) { ... }

Description

Retrieve a configuration item.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$key

configuration item key

Stringnone

Returns

Any type

Requires

Used by

helpers

functions

[private] _join

@function _join($list, $glue: '') { ... }

Description

Helper: join $list into a string.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$list

the list to convert

Listnone
$glue

a string to separate each element of the list

String''

Returns

String

Used by

[private] _sprite-map-get

@function _sprite-map-get($name, $factor: 1x) { ... }

Description

Helper: retrieve a spritemap.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

spritemap name

Stringnone
$factor

dpi factor

String1x

Returns

Spritemap

Requires

Used by

[private] _sprite-position

@function _sprite-position($map, $sprite, $offset-x: 0, $offset-y: 0, $scale: 1) { ... }

Description

Helper: return correct spritemap background-position.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$map

spritemap name

Spritemapnone
$sprite

sprite name

Stringnone
$offset-x

adjustment along the x axis

Number0
$offset-y

adjustment along the y axis

Number0
$scale

spritemap scale

Number1

Returns

List

(x-pos y-pos)

Requires

  • [external] Compass::sprite-position

Used by

mixins

[private] hidpi-mq

@mixin hidpi-mq() { ... }

Description

Hidpi media query builder.

Parameters

None.

Requires

Used by

Links

[private] generated

@mixin generated($width, $height, $top, $right, $bottom, $left) { ... }

Description

Boilerplate styles for generated content :before or :after.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$widthnoneNumbernone
$heightnoneNumbernone
$topnoneNumbernone
$rightnoneNumbernone
$bottomnoneNumbernone
$leftnoneNumbernone

Used by

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$map

spritemap name

Stringnone
$sprite

sprite name

Stringnone
$pos

pseudo-element position

String'before'
$centered

whether to center the icon, relative to its parent

Boolfalse
$format

file format 'svg' | 'png'

Stringconf(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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$map

spritemap name

Stringnone
$sprite

sprite name

Stringnone
$format

file format 'svg' | 'png'

Stringconf(format)

Output

Cross-browser icon as background-image

Requires

  • [function] conf
  • [function] _join
  • [external] Compass::inline-image
  • [external] Compass::inline-url
  • [external] Compass::image-width
  • [mixin] hidpi-mq

icon

@mixin icon($map, $sprite, $offset: (0 0), $format: conf(format)) { ... }

Description

Main icon mixin, default choice unless there are specific needs.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$map

spritemap name

Stringnone
$sprite

sprite name

Stringnone
$offset

adjustment along the x y axis

List(0 0)
$format

file format 'svg' | 'png'

Stringconf(format)

Output

Cross-browser icon as background-image

Example

Include an icon

  .twitter {
    @include icon(social, twitter);
  }

Requires

Used by

sprite-map-create

@mixin sprite-map-create($name, $spacing: conf(spacing)) { ... }

Description

Create a new spritemap from folder.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

spritemap name, which is also the folder name

Stringnone
$spacing

Whether to add space around sprites in generated spritemap

Numberconf(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