assets

variables

asset-base-path

$asset-base-path: "../" !default;

Description

Default path of the folder containing assets

Type

String

Used by

[function] asset-path

Author

Pierre Burel

asset-type-path

$asset-type-path: (
  "image": "images/",
  "font": "fonts/"
) !default;

Description

Default paths of the folders containing specific types assets (image and font) relative to $asset-base-path

Type

Map

Used by

[function] asset-path

Author

Pierre Burel

svg-namespace

$svg-namespace: 'xmlns="http://www.w3.org/2000/svg"' !default;

Description

Default SVG namespace

Type

String

Used by

[function] svg-url

svg-encode

$svg-encode: (
  '"': '\'',
  '%': '%25',
  '&': '%26',
  '#': '%23',
  '{': '%7B',
  '}': '%7D',
  '<': '%3C',
  '>': '%3E'
) !default;

Description

Default SVG characters to encode

Type

Map

Used by

[function] svg-url

functions

asset-path

@function asset-path($type, $file) { ... }

Description

Returns the path of an asset

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$type`	type of the asset	`String`	— none
`$file`	name of the asset	`String`	— none

Returns

String —

complete path of the asset

Example

background-image: url(asset-path("image", "logo.png"));
// background-image: url("../images/logo.png");

Throws

#{$type} is not a valid asset type.

Requires

[variable] asset-base-path
[variable] asset-type-path

Used by

[function] asset-url
[function] image-path
[function] font-path

Author

Pierre Burel

asset-url

@function asset-url($type, $file) { ... }

Description

Returns the url of an asset

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$type`	type of the asset	`String`	— none
`$file`	name of the asset	`String`	— none

Returns

String —

complete url of the asset

Example

background-image: asset-url("image", "logo.png");
// background-image: url("../images/logo.png");

Requires

[function] asset-path

Author

Pierre Burel

image-path

@function image-path($file) { ... }

Description

Returns the path of an image

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$file`	name of the image	`String`	— none

Returns

String —

complete path of the image

Example

background-image: url(image-path("logo.png"));
// background-image: url("../images/logo.png");

Requires

[function] asset-path

Used by

[function] image-url

Author

Pierre Burel

image-url

@function image-url($file) { ... }

Description

Returns the url of an image

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$file`	name of the image	`String`	— none

Returns

String —

complete url of the image

Example

background-image: image-url("logo.png");
// background-image: url("../images/logo.png");

Requires

[function] image-path

Author

Pierre Burel

font-path

@function font-path($file) { ... }

Description

Returns the path of a webfont

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$file`	name of the font	`String`	— none

Returns

String —

complete path of the font

Example

src: url(font-path("webfont.woff")) format("woff");
// src: url("../fonts/webfont.woff") format("woff");

Requires

[function] asset-path

Used by

[function] font-url

Author

Pierre Burel

font-url

@function font-url($file) { ... }

Description

Returns the url of a webfont

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$file`	name of the font	`String`	— none

Returns

String —

complete url of the font

Example

src: font-url("webfont.woff") format("woff");
// src: url("../fonts/webfont.woff") format("woff");

Requires

[function] font-path

Used by

[mixin] font-face

Author

Pierre Burel

svg-url

@function svg-url($svg) { ... }

Description

URL-encode a SVG to be used as a background-image Automatically add missing namespace

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$svg`	SVG to encode	`String`	— none

Returns

String —

encoded SVG

Example

background-image: svg-url('<svg width="512" height="512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z"/></svg>');
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath d='M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E");

Requires

[variable] svg-namespace
[variable] svg-encode
[function] str-replace

colors

functions

tint

@function tint($color, $percentage) { ... }

Description

Slightly lighten a color

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	color to tint	`Color`	— none
`$percentage`	percentage of `$color` in returned color	`Number`	— none

Returns

Color

Example

color: tint(#bada55, 50%);
// color: #ddedaa;

Author

Hugo Giraudel

shade

@function shade($color, $percentage) { ... }

Description

Slightly darken a color

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	color to shade	`Color`	— none
`$percentage`	percentage of `$color` in returned color	`Number`	— none

Returns

Color

Example

color: shade(#bada55, 50%);
// color: #5d6d2b;

Author

Hugo Giraudel

luminance

@function luminance($color) { ... }

Description

Calculate the luminance for a $color

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	Color	`Color`	— none

Returns

Number

Example

color: if(luminance(#bada55) > 0.5, black, white);
// color: black;

Used by

[function] contrast

Author

Sérgio Gomes

contrast

@function contrast($back, $front) { ... }

Description

Calculate the contrast ratio between two colors

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$back`	Color	`Color`	— none
`$front`	Color	`Color`	— none

Returns

Number

Example

contrast: contrast(#bada55, white);
// contrast: 1.5851978696;

Requires

[function] luminance

Used by

[function] contrast-color

Author

Sérgio Gomes

contrast-color

@function contrast-color($color, $light: white, $dark: black) { ... }

Description

Determine whether to use $dark or $light text on top of given background $color

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	Background color	`Color`	— none
`$light`	Light color	`Color`	`white`
`$dark`	Dark color	`Color`	`black`

Returns

Color

Example

color: contrast-color(#bada55);
// color: black;

color: contrast-color(#bada55, #ccc, #333);
// color: #333;

Requires

[function] contrast

Author

Sérgio Gomes

display

mixins

clearfix

@mixin clearfix() { ... }

Description

Clear floats with the last generation clearfix method

Parameters

None.

Example

.u-clearfix {
  @include clearfix;
}
// .u-clearfix::after {
//   clear: both;
//   content: "";
//   display: block;
// }

Author

Thierry Koblentz

hide-visually

@mixin hide-visually($visible: false) { ... }

Description

Hide visually an element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$visible`	set to true to toggle visibility	`Boolean`	`false`

Example

.u-hide-visually {
  @include hide-visually;

  &:active,
  &:focus {
    @include hide-visually("unhide");
  }
}
// .u-hide-visually {
//   border: 0;
//   clip: rect(0 0 0 0);
//   clip-path: inset(50%);
//   height: 1px;
//   overflow: hidden;
//   padding: 0;
//   position: absolute;
//   white-space: nowrap;
//   width: 1px;
// }
// .u-hide-visually:active, .u-hide-visually:focus {
//   clip: auto;
//   clip-path: none;
//   height: auto;
//   overflow: visible;
//   position: static;
//   white-space: normal;
//   width: auto;
// }

Author

Pierre Burel

hide-text

@mixin hide-text() { ... }

Description

Hide text of an element (used for image replacement)

Parameters

None.

Example

.u-hide-text {
  @include hide-text;
}
// .u-hide-text {
//   direction: ltr;
//   overflow: hidden;
//   text-indent: 100%;
//   white-space: nowrap;
// }

Author

Pierre Burel

position

@mixin position($position: absolute, $shorthand: 0, $rem: true) { ... }

Description

Set position and top/right/bottom/left properties ; Uses sass-rem if available

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	position value	`String`	`absolute`
`$shorthand`	list of lengths	`List`	`0`
`$rem`	set to false to disable rem	`Boolean`	`true`

Example

.u-position-cover {
  @include position;
}
// .u-position-cover {
//   position: absolute;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   left: 0;
// }

.u-position-fixed {
  @include position(fixed, 20px 40px);
}
// .u-position-fixed {
//   position: fixed;
//   top: 1.25rem;
//   right: 2.5rem;
//   bottom: 1.25rem;
//   left: 2.5rem;
// }

Requires

[external] sass-rem/rem

Author

Pierre Burel

size

@mixin size($width, $height: $width, $rem: true) { ... }

Description

Set width and height of an element ; Uses sass-rem if available

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	width of the element	`Number`	— none
`$height`	height of the element	`Number`	`$width`
`$rem`	set to false to disable rem	`Boolean`	`true`

Example

.u-shape-square {
  @include size(20px);
}
// .u-shape-square {
//   height: 1.25rem;
//   width: 1.25rem;
// }

.u-shape-rectangle {
  @include size(40em, 20em);
}
// .u-shape-rectangle {
//   height: 20em;
//   width: 40em;
// }

Requires

[external] sass-rem/rem

Author

Pierre Burel

fonts

variables

font-face-suffix

$font-face-suffix: "-webfont" !default;

Description

Suffix to append to font filename

Type

String

Used by

[mixin] font-face

font-size-default

$font-size-default: 16px !default;

Description

Default font-size

Type

Number

Used by

[mixin] font-size

line-height-default

$line-height-default: 24px !default;

Description

Default line-height

Type

Number

Used by

[mixin] font-size

mixins

font-face

@mixin font-face($family, $filename, $suffix: $font-face-suffix) { ... }

Description

Generate @font-face declaration (woff and woff2 only)

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$family`	font family name	`String`	— none
`$filename`	font filename (without extension)	`String`	— none
`$suffix`	suffix to append to filename	`String`	`$font-face-suffix`

Example

@include font-face("My Font", "myfont");
// @font-face {
//   font-family: "My Font";
//   src: url("../fonts/myfont-webfont.woff") format("woff"),
//        url("../fonts/myfont-webfont.woff2") format("woff2");
// }

@include font-face("My Font", "myfont") {
  font-style: italic;
}
// @font-face {
//   font-family: "My Font";
//   src: url("../fonts/myfont-webfont.woff") format("woff"),
//        url("../fonts/myfont-webfont.woff2") format("woff2");
//   font-style: italic;
// }

Requires

[function] font-url
[variable] font-face-suffix

Author

Pierre Burel

font-size

@mixin font-size($font-size: $font-size-default, $line-height: auto, $rem: true) { ... }

Description

Generate rem font-size and unitless line-height properties ; uses sass-rem if available

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$font-size`	font size in px	`Number`	`$font-size-default`
`$line-height`	can be auto, 24px, 1.5, default, false…	`Number` or `String` or `Boolean`	`auto`
`$rem`	set to false to disable rem	`Boolean`	`true`

Example

@include font-size;
// font-size: 1rem;
// line-height: 1.5;

@include font-size(24px);
// font-size: 1.5rem;
// line-height: 1;

@include font-size(24px, 32px);
// font-size: 1.5rem;
// line-height: 1.3333333333;

@include font-size(24px, false);
// font-size: 1.5rem;

Requires

[external] sass-rem/rem
[variable] font-size-default
[variable] line-height-default

Author

Pierre Burel

types

functions

map-deep-get

@function map-deep-get($map, $keys...) { ... }

Description

Map deep get

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	Map	`Map`	— none
`$keys`	Key chain	`Arglist`	— none

Returns

Any type —

Desired value

Author

Hugo Giraudel

map-deep-set

@function map-deep-set($map, $keys, $value) { ... }

Description

Deep set function to set a value in nested maps

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	Map	`Map`	— none
`$keys`	Key chaine	`List`	— none
`$value`	Value to assign	`Any`	— none

Returns

Map

Throws

Key #{$key} doesn

Author

Hugo Giraudel

clamp-number

@function clamp-number($number, $min, $max) { ... }

Description

Clamp $number between $min and $max

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	Number to clamp	`Number`	— none
`$min`	Minimum value	`Number`	— none
`$max`	Maximum value	`Number`	— none

Returns

Number

Author

Hugo Giraudel

to-fixed

@function to-fixed($float, $digits: 2) { ... }

Description

toFixed() function in Sass

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$float`	Number to format	`Number`	— none
`$digits`	Number of digits to leave	`Number`	`2`

Returns

Number

Requires

[function] pow

Author

Hugo Giraudel

pow

@function pow($x, $n) { ... }

Description

Power function

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$x`	— none	`Number`	— none
`$n`	— none	`Number`	— none

Returns

Number

Used by

[function] to-fixed

Author

Hugo Giraudel

strip-unit

@function strip-unit($number) { ... }

Description

Remove the unit of a length

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	Number to remove unit from	`Number`	— none

Returns

Number —

Unitless number

Author

Hugo Giraudel

str-replace

@function str-replace($string, $search, $replace: '') { ... }

Description

Replace $search with $replace in $string

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Initial string	`String`	— none
`$search`	Substring(s) to replace	`String` or `List` or `Map`	— none
`$replace`	New value(s)	`String` or `List`	`''`

Returns

String —

Updated string

Throws

$replace must have the same length as $search.
You cannot replace one item with multiple ones.

Used by

[function] svg-url

Authors

Hugo Giraudel
Pierre Burel

str-contains

@function str-contains($string, $search) { ... }

Description

Check if $string contains $search

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	String to check	`String`	— none
`$search`	Substring to search	`String`	— none

Returns

Boolean

Author

Sindre Sorhus

str-starts-with

@function str-starts-with($string, $search) { ... }

Description

Check if $string starts with the given $substring.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	String to check	`String`	— none
`$search`	Substring to search for at the start of `$string`	`String`	— none

Returns

Boolean

Author

Sindre Sorhus

str-ends-with

@function str-ends-with($string, $search) { ... }

Description

Check if $string ends with the given $substring.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	String to check	`String`	— none
`$search`	Substring to search for at the end of `$string`	`String`	— none

Returns

Boolean

Author

Sindre Sorhus

is-number

@function is-number($string) { ... }

Description

Check if $value is a number

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Used by

[function] is-duration
[function] is-angle
[function] is-frequency
[function] is-integer
[function] is-relative-length
[function] is-absolute-length
[function] is-percentage
[function] is-resolution

Author

Hugo Giraudel

is-duration

@function is-duration($string) { ... }

Description

Check if $value is a duration

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-number

Author

Hugo Giraudel

is-angle

@function is-angle($string) { ... }

Description

Check if $value is an angle

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-number

Author

Hugo Giraudel

is-frequency

@function is-frequency($string) { ... }

Description

Check if $value is a frequency

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-number

Author

Hugo Giraudel

is-integer

@function is-integer($string) { ... }

Description

Check if $value is an integer

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-number

Author

Hugo Giraudel

is-relative-length

@function is-relative-length($string) { ... }

Description

Check if $value is a relative length

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-number

Used by

[function] is-length

Author

Hugo Giraudel

is-absolute-length

@function is-absolute-length($string) { ... }

Description

Check if $value is an absolute length

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-number

Used by

[function] is-length

Author

Hugo Giraudel

is-percentage

@function is-percentage($string) { ... }

Description

Check if $value is a percentage

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-number

Used by

[function] is-position

Author

Hugo Giraudel

is-length

@function is-length($string) { ... }

Description

Check if $value is a length

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-relative-length
[function] is-absolute-length

Used by

[function] is-position

Author

Hugo Giraudel

is-resolution

@function is-resolution($string) { ... }

Description

Check if $value is a resolution

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-number

Author

Hugo Giraudel

is-position

@function is-position($string) { ... }

Description

Check if $value is a position

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to check	`String`	— none

Returns

Bool

Requires

[function] is-length
[function] is-percentage

Author

Hugo Giraudel

assets

variables

Description

Type

Used by

Author

Description

Type

Used by

Author

Description

Type

Used by

Description

Type

Used by

functions

Description

Parameters

Returns

Example

Throws

Requires

Used by

Author

Description

Parameters

Returns

Example

Requires

Author

Description

Parameters

Returns

Example

Requires

Used by

Author

Description

Parameters

Returns

Example

Requires

Author

Description

Parameters

Returns

Example

Requires

Used by

Author

Description

Parameters

Returns

Example

Requires

Used by

Author

Description

Parameters

Returns

Example

Requires

Links

colors

functions

Description

Parameters

Returns

Example

Links

Author

Description

Parameters

Returns

Example

Links

Author

Description

Parameters