Configuration

variables

filters-defaults

$filters-defaults: (

  // Encoding of the SVG filters as data URI: raw | escaped | base64.
  data-type: "raw",

  // Whether to add IE proprietary filters or not.
  ie-support: true

);
View source

Description

Default settings.

Type

Map

Map structure

Map key Name Map key Description Map key Type Map key Value
data-type

Encoding of the SVG filters as data URI: raw | escaped | base64.

String 'raw'
ie-support

Whether to add IE proprietary filters or not.

Boolean true

filters-settings

$filters-settings: () !default;
View source

Description

User settings.

Type

Map

Example

Override defaults

// Instanciate the same object in your stylesheets to override defaults.
$filters-settings: (
  ie-support: false
);

Filters API

mixins

blur

@mixin blur($radius: 0px) { ... }
View source

Description

blur filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$radius none Number 0px

Requires

brightness

@mixin brightness($value: 1) { ... }
View source

Description

brightness filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number 1

Requires

contrast

@mixin contrast($value: 1) { ... }
View source

Description

contrast filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number 1

Requires

drop-shadow

@mixin drop-shadow($offset-x: 0px, $offset-y: $offset-x, $blur-radius: Opx, $color: rgba(0 ,0 , 0, .5)) { ... }
View source

Description

drop-shadow filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$offset-x none Number 0px
$offset-y none Number $offset-x
$blur-radius none Number Opx
$color none Color rgba(0 ,0 , 0, .5)

Requires

grayscale

@mixin grayscale($value: 0) { ... }
View source

Description

grayscale filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number 0

Requires

hue-rotate

@mixin hue-rotate($angle: 0deg) { ... }
View source

Description

hue-rotate filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$angle none Number 0deg

Requires

invert

@mixin invert($value: 0) { ... }
View source

Description

invert filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number 0

Requires

opacity

@mixin opacity($value: 1) { ... }
View source

Description

opacity filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number 1

Requires

saturate

@mixin saturate($value: 1) { ... }
View source

Description

saturate filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number 1

Requires

sepia

@mixin sepia($value: 0) { ... }
View source

Description

sepia filter mixin.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number 0

Requires

Helpers

functions

_svg-filter

@function _svg-filter($function, $args...) { ... }
View source

Description

Helper: Get and format a single SVG filter.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$function

filter function

String none
$args

arguments to be passed to the SVG filter

Arglist none

Returns

String

_ie-filter

@function _ie-filter($filter, $args...) { ... }
View source

Description

Helper: IE filter formatting helper.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$filter

filter name

String none
$args

filter properties

Arglist none

Returns

String

Used by

svg-data-uri

@function svg-data-uri($data, $mime-type: 'image/svg+xml', $encoding: 'charset=utf-8', $fragment: '') { ... }
View source

Description

Format a proper SVG data URI.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$data

SVG data

String none
$mime-type none String 'image/svg+xml'
$encoding none String 'charset=utf-8'
$fragment

fragment identifier

String ''

Returns

String

Used by

Links

inline-svg

@function inline-svg($svgStr, $encoding: conf.data-type, $fragment: '') { ... }
View source

Description

Format and encode an inline SVG.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$svgStr

stringified SVG

String none
$encoding

data type 'raw' | 'base64' | 'escaped'

String conf.data-type
$fragment

fragment identifier

String ''

Returns

String

Requires

Used by

Output

mixins

disable-filter

@mixin disable-filter($function: null) { ... }
View source

Description

Helper mixin, disable previously enabled filters.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$function

filter function name

String null

Requires

filters

@mixin filters($filters, $id: null) { ... }
View source

Description

Main filters mixin, used internaly or for combining several filters. Print final conbined filters output.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$filters

a map of filters (function: (params,))

Map none
$id

filter name, default to function name or "custom"

String null

Requires

Used by

output

@mixin output($output) { ... }
View source

Description

Ouput mixin, print final cross-browser filters declarations. Print final filters output.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$output

a map of browser specific filters

Map none

Requires

Used by

svg-filter

@mixin svg-filter($svgStr, $fragment, $encoding: conf.data-type) { ... }
View source

Description

Helper mixin to embed a cutom SVG filter. Print final SVG filter declaration.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$svgStr

stringified SVG

String none
$fragment

fragment identifier

String none
$encoding

data type raw | base64 | escaped

String conf.data-type

Requires