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

Name Description Type 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

Name Description Type Default value
$radius — Number 0px

Requires

brightness 

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

Description

brightness filter mixin.

Parameters

Name Description Type Default value
$value — Number 1

Requires

contrast 

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

Description

contrast filter mixin.

Parameters

Name Description Type Default value
$value — 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

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

Requires

grayscale 

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

Description

grayscale filter mixin.

Parameters

Name Description Type Default value
$value — Number 0

Requires

hue-rotate 

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

Description

hue-rotate filter mixin.

Parameters

Name Description Type Default value
$angle — Number 0deg

Requires

invert 

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

Description

invert filter mixin.

Parameters

Name Description Type Default value
$value — Number 0

Requires

opacity 

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

Description

opacity filter mixin.

Parameters

Name Description Type Default value
$value — Number 1

Requires

saturate 

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

Description

saturate filter mixin.

Parameters

Name Description Type Default value
$value — Number 1

Requires

sepia 

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

Description

sepia filter mixin.

Parameters

Name Description Type Default value
$value — Number 0

Requires

Helpers

functions

_svg-filter 

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

Description

Helper: Get and format a single SVG filter.

Parameters

Name Description Type Default value
$function

filter function

 String —
$args

arguments to be passed to the SVG filter

 Arglist —

Returns

String

_ie-filter 

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

Description

Helper: IE filter formatting helper.

Parameters

Name Description Type Default value
$filter

filter name

 String —
$args

filter properties

 Arglist —

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

Name Description Type Default value
$data

SVG data

 String —
$mime-type — String 'image/svg+xml'
$encoding — 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

Name Description Type Default value
$svgStr

stringified SVG

 String —
$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

Name Description Type 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

Name Description Type Default value
$filters

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

 Map —
$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

Name Description Type Default value
$output

a map of browser specific filters

 Map —

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

Name Description Type Default value
$svgStr

stringified SVG

 String —
$fragment

fragment identifier

 String —
$encoding

data type raw | base64 | escaped

 String conf.data-type

Requires