Flavor SCSS - Advanced type checking Sass/SCSS Framework with Mixins & Helpers and a fully customizable Grid System

Greetings to

Core

functions

is-null

@function is-null($n) { ... }

Description

Checks if a value is null

Parameters

NameDescriptionTypeDefault value
$n

the value to check

Any—

Returns

Boolean —

true if is null

Used by

Author

  • blackmirror1980

is-defined

@function is-defined($d) { ... }

Description

Checks if a value is defined

Parameters

NameDescriptionTypeDefault value
$d

the value to check

Any—

Returns

Boolean —

true if is defined

Requires

Used by

Author

  • blackmirror1980

nth-value

@function nth-value($list, $index, $default: null) { ... }

Description

nth-value Helper function
Return $default rather than throwing an error if index is not available in the list.

Parameters

NameDescriptionTypeDefault value
$list

the haystack list to check

Array or List—
$index

the needle index

Integer—
$default

the default value to fallback

Anynull

Returns

Any —

the nth-value

Used by

Author

  • blackmirror1980

Grid System

mixins

grid-system

@mixin grid-system($columns: $columns-default, $gutter: $gutter-default, $reboot: true) { ... }

Description

Grid system mixin
entry point of flavor-scss grid system

Parameters

NameDescriptionTypeDefault value
$columns

the columns number

Integer$columns-default
$gutter

the gutter value

Size or Length$gutter-default
$reboot

if true a reboot/reset/normalize will be prepended to the grid system

Booleantrue

Throws

  • columns: #{$columns}, gutter: #{$gutter} are not valid options for the grid-system mixin

Requires

Author

  • blackmirror1980

Grid System - Columns

mixins

columns

@mixin columns($columns: $columns-default, $gutter: $gutter-default) { ... }

Description

Columns mixin

Parameters

NameDescriptionTypeDefault value
$columns

the columns number

Integer$columns-default
$gutter

the gutter value

Size or Length$gutter-default

Throws

  • columns: #{$columns}, gutter: #{$gutter} are not valid options for the grid-system columns mixin

Requires

Used by

Author

  • blackmirror1980

Grid System - Reboot

css

*

* { ... }

Description

every selector will be resetted to

  • Change from box-sizing: content-box so that width is not affected by padding or border.
  • Change the default font family in all browsers.
  • Correct the line height in all browsers.
  • Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
  • Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to counteract.
  • Change the default tap highlight to be completely transparent in iOS.
@name star-selector-reset

Author

  • blackmirror1980

Mixins - Animation

functions

is-animation-name

@function is-animation-name($an) { ... }

Description

Checks if animation name is string or animation-name-mode (none, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$an

the animation-name value

String—

Returns

Boolean —

true if is animation-name value

Requires

Used by

Links

Author

  • blackmirror1980

is-animation-time

@function is-animation-time($at) { ... }

Description

Checks if animation time is a correct time value

Parameters

NameDescriptionTypeDefault value
$at

the animation-time value

String—

Returns

Boolean —

true if is animation-time value

Requires

Used by

Links

Author

  • blackmirror1980

is-animation-direction

@function is-animation-direction($ad) { ... }

Description

Checks if animation direction is a correct direction mode

Parameters

NameDescriptionTypeDefault value
$ad

the animation-direction mode

String—

Returns

Boolean —

true if is animation-direction mode

Requires

Used by

Links

Author

  • blackmirror1980

is-animation-iteration-count

@function is-animation-iteration-count($aic) { ... }

Description

Checks if animation iteration count is a correct iteration count value (integer or infinite, initial, inherit)

Parameters

NameDescriptionTypeDefault value
$aic

the animation-iteration-count value

String—

Returns

Boolean —

true if is animation-iteration-count value

Requires

Used by

Links

Author

  • blackmirror1980

is-animation-fill

@function is-animation-fill($afm) { ... }

Description

Checks if animation fill mode is a correct fill mode value (integer or none, forwards, backwards, both, initial, inherit)

Parameters

NameDescriptionTypeDefault value
$afm

the animation-fill mode

String—

Returns

Boolean —

true if is animation-fill mode

Requires

Used by

Links

Author

  • blackmirror1980

is-animation-timing-function

@function is-animation-timing-function($atf) { ... }

Description

Checks if animation timing function mode is a correct timing function (steps(), cubid-bezier(), linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, initial, inherit)

Parameters

NameDescriptionTypeDefault value
$atf

the animation-timing-function value

String—

Returns

Boolean —

true if is animation-timing-function value

Requires

Used by

Links

Author

  • blackmirror1980

is-animation-play-state-modes

@function is-animation-play-state-modes($aps) { ... }

Description

Checks if animation play state is a correct play state mode (paused, running, initial, inherit)

Parameters

NameDescriptionTypeDefault value
$aps

the animation-play-state mode

String—

Returns

Boolean —

true if is animation-play-state mode

Requires

Links

Author

  • blackmirror1980

mixins

keyframes

@mixin keyframes($animation-name) { ... }

Description

Keyframe Mixin

Parameters

NameDescriptionTypeDefault value
$animation-name

the animation name

String—

Example

Usage - Fade Out

@include keyframes(fade-out) {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Output - Fade Out

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Usage - Change Color

@include keyframes(change-color) {
  0% {
    color: #000;
  }
  100% {
    color: #FFF;
  }
}

Output - Change Color

@keyframes change-color {
  0% {
    color: #000;
  }
  100% {
    color: #FFF;
  }
}

Author

  • blackmirror1980

animation

@mixin animation($options, $options.name: none, $options.duration: 0s, $options.delay: 0s, $options.direction: normal, $options.iteration-count: 0, $options.timing-function: ease, $options.fill-mode: forwards, $options.play-state: initial, $important: false) { ... }

Description

Animation Mixin

Parameters

NameDescriptionTypeDefault value
$options

animation options

Object or Map—
$options.name

animation name

String or Animation-name-modenone
$options.duration

animation duration

Time0s
$options.delay

animation delay

Time0s
$options.direction

animation direction

Stringnormal
$options.iteration-count

animation iteration count

Integer0
$options.timing-function

animation timing function (easing)

Stringease
$options.fill-mode

animation fill mode

Stringforwards
$options.play-state

animation play state

Stringinitial
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.animated-element {
  @include animation(change-color 10s 5s);
}

Output

.animated-element {
  -webkit-animation-name: change-color;
  -moz-animation-name: change-color;
  -ms-animation-name: change-color;
  -o-animation-name: change-color;
  animation-name: change-color;

  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -ms-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-duration: 10s;

  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -ms-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;

  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  -ms-animation-direction: normal;
  -o-animation-direction: normal;
  animation-direction: normal;

  -webkit-animation-iteration-count: 0;
  -moz-animation-iteration-count: 0;
  -ms-animation-iteration-count: 0;
  -o-animation-iteration-count: 0;
  animation-iteration-count: 0;

  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  -webkit-animation-play-state: initial;
  -moz-animation-play-state: initial;
  -ms-animation-play-state: initial;
  -o-animation-play-state: initial;
  animation-play-state: initial;
}

Throws

  • animation-name: #{$animation-name} is mandatory parameter

Requires

Author

  • blackmirror1980

variables

[private] animation-name-modes

$animation-name-modes: array-concat((none), $css-default-modes);

Description

Animation name modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] animation-direction-modes

$animation-direction-modes: array-concat((normal, reverse, alternate, alternate-reverse), $css-default-modes);

Description

Animation direction modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] animation-iteration-count-modes

$animation-iteration-count-modes: array-concat((infinite), $css-default-modes);

Description

Animation iteration count modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] animation-fill-modes

$animation-fill-modes: array-concat((none, forwards, backwards, both), $css-default-modes);

Description

Animation fill modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] animation-timing-function-modes

$animation-timing-function-modes: array-concat((linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end), $css-default-modes);

Description

Animation timing function modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] animation-play-state-modes

$animation-play-state-modes: array-concat((paused, running), $css-default-modes);

Description

Animation play state supported

Type

List

Used by

Author

  • blackmirror1980

Mixins - Appearance

functions

is-appearance-mode

@function is-appearance-mode($a) { ... }

Description

Checks if something is an appearance mode

Parameters

NameDescriptionTypeDefault value
$a

the appearance mode

String—

Returns

Boolean —

true if is appearance mode

Requires

Links

Author

  • blackmirror1980

mixins

appearance

@mixin appearance($a, $important: false) { ... }

Description

Appearance mixin

Parameters

NameDescriptionTypeDefault value
$a

the appearance mode

Appearance-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.appearance-element {
  @include appearance(none);
}

Output

.appearance-element {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Requires

Author

  • blackmirror1980

variables

[private] appearance-modes

$appearance-modes: (none, button, button-arrow-down, button-arrow-next, button-arrow-previous, button-arrow-up, button-bevel, button-focus, caret, checkbox, checkbox-container, checkbox-label, checkmenuitem, dualbutton, groupbox, listbox, listitem, menuarrow, menubar, menucheckbox, menuimage, menuitem, menuitemtext, menulist, menulist-button, menulist-text, menulist-textfield, menupopup, menuradio, menuseparator, meterbar, meterchunk, progressbar, progressbar-vertical, progresschunk, progresschunk-vertical, radio, radio-container, radio-label, radiomenuitem, range, range-thumb, resizer, resizerpanel, scale-horizontal, scalethumbend, scalethumb-horizontal, scalethumbstart, scalethumbtick, scalethumb-vertical, scale-vertical, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-right, scrollbarbutton-up, scrollbarthumb-horizontal, scrollbarthumb-vertical, scrollbartrack-horizontal, scrollbartrack-vertical, searchfield, separator, sheet, spinner, spinner-downbutton, spinner-textfield, spinner-upbutton, splitter, statusbar, statusbarpanel, tab, tabpanel, tabpanels, tab-scroll-arrow-back, tab-scroll-arrow-forward, textfield, textfield-multiline, toolbar, toolbarbutton, toolbarbutton-dropdown, toolbargripper, toolbox, tooltip, treeheader, treeheadercell, treeheadersortarrow, treeitem, treeline, treetwisty, treetwistyopen, treeview, -moz-mac-unified-toolbar, -moz-win-borderless-glass, -moz-win-browsertabbar-toolbox, -moz-win-communicationstext, -moz-win-communications-toolbox, -moz-win-exclude-glass, -moz-win-glass, -moz-win-mediatext, -moz-win-media-toolbox, -moz-window-button-box, -moz-window-button-box-maximized, -moz-window-button-close, -moz-window-button-maximize, -moz-window-button-minimize, -moz-window-button-restore, -moz-window-frame-bottom, -moz-window-frame-left, -moz-window-frame-right, -moz-window-titlebar, -moz-window-titlebar-maximized);

Description

Appearance modes supported

Type

List

Used by

Author

  • blackmirror1980

Mixins - Background

functions

is-background-image-mode

@function is-background-image-mode($bi) { ... }

Description

Checks if something is background image mode (none, initial, inherit)

Parameters

NameDescriptionTypeDefault value
$bi

the background-image mode

String—

Returns

Boolean —

true if is background-image mode

Requires

Used by

Author

  • blackmirror1980

is-background-attachment

@function is-background-attachment($ba) { ... }

Description

Checks if something is a background attachment mode

Parameters

NameDescriptionTypeDefault value
$ba

the background-attachment mode

String—

Returns

Boolean —

true if is background-attachment mode

Requires

Used by

Links

Author

  • blackmirror1980

is-background-repeat

@function is-background-repeat($br) { ... }

Description

Checks if something is a background repeat value

Parameters

NameDescriptionTypeDefault value
$br

the background-repeat value

String—

Returns

Boolean —

true if is background-repeat value

Requires

Used by

Links

Author

  • blackmirror1980

is-background-origin-clip

@function is-background-origin-clip($boc) { ... }

Description

Checks if something is a background origin/clip mode

Parameters

NameDescriptionTypeDefault value
$boc

the background-origin or background-clip value

String—

Returns

Boolean —

true if is background-origin or background-clip value

Requires

Used by

Links

Author

  • blackmirror1980

is-background-size

@function is-background-size($bs) { ... }

Description

Checks if something is a background size value

Parameters

NameDescriptionTypeDefault value
$bs

the background-size value/values

String or Array—

Returns

Boolean —

true if is background-size value/values

Requires

Used by

Links

Author

  • blackmirror1980

is-background-image

@function is-background-image($bi) { ... }

Description

Checks if something is background image (url, none, initial, inherit)

Parameters

NameDescriptionTypeDefault value
$bi

the background-image value

String—

Returns

Boolean —

true if is background-image value

Requires

Used by

Author

  • blackmirror1980

is-background-position

@function is-background-position($bp) { ... }

Description

Checks if something is a background position value

Parameters

NameDescriptionTypeDefault value
$bp

the background-position value/values

String or Array—

Returns

Boolean —

true if is background-position value/values

Requires

Used by

Links

Author

  • blackmirror1980

mixins

background-color

@mixin background-color($bc, $important: false) { ... }

Description

Background color mixin

Parameters

NameDescriptionTypeDefault value
$bc

the background-color value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-color-element {
  @include background-color(#ffddee);
}

Output

.background-color-element {
  background-color: #ffddee;
}

Requires

Used by

Author

  • blackmirror1980

background-attachment

@mixin background-attachment($ba, $important: false) { ... }

Description

Background attachment mixin

Parameters

NameDescriptionTypeDefault value
$ba

the background-attachment value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-attachment-element {
  @include background-attachment(local);
}

Output

.background-attachment-element {
  background-attachment: local;
}

Requires

Used by

Author

  • blackmirror1980

background-repeat

@mixin background-repeat($br, $important: false) { ... }

Description

Background repeat mixin

Parameters

NameDescriptionTypeDefault value
$br

the background-repeat value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-repeat-element {
  @include background-repeat(no-repeat);
}

Output

.background-repeat-element {
  background-repeat: no-repeat;
}

Requires

Used by

Author

  • blackmirror1980

background-origin

@mixin background-origin($bo, $important: false) { ... }

Description

Background origin mixin

Parameters

NameDescriptionTypeDefault value
$bo

the background-origin value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-origin-element {
  @include background-origin(border-box);
}

Output

.background-origin-element {
  background-origin: border-box;
}

Requires

Used by

Author

  • blackmirror1980

background-image

@mixin background-image($bi, $important: false) { ... }

Description

Background image mixin

Parameters

NameDescriptionTypeDefault value
$bi

the background-image value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-image-element {
  @include background-image(url('http://www.......'));
}

Output

.background-image-element {
  background-image: url('http://www.......');
}

Requires

Used by

Author

  • blackmirror1980

background-size

@mixin background-size($bs, $important: false) { ... }

Description

Background size mixin

Parameters

NameDescriptionTypeDefault value
$bs

the background-size value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-size-element {
  @include background-size(100% 20px);
}

Output

.background-size-element {
  background-size: 100% 20px;
}

Requires

Used by

Author

  • blackmirror1980

background-clip

@mixin background-clip($bc, $important: false) { ... }

Description

Background clip mixin

Parameters

NameDescriptionTypeDefault value
$bc

the background-clip value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-clip-element {
  @include background-clip(border-box);
}

Output

.background-clip-element {
  background-clip: border-box;
}

Requires

Used by

Author

  • blackmirror1980

background-position

@mixin background-position($bp, $important: false) { ... }

Description

Background position mixin

Parameters

NameDescriptionTypeDefault value
$bp

the background-position value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-position-element {
  @include background-position(top center);
}

Output

.background-position-element {
  background-position: top center;
}

Requires

Used by

Author

  • blackmirror1980

background

@mixin background($options, $options.color: transparent, $options.image: none, $options.position: 0 0, $options.size: auto, $options.repeat: repeat, $options.origin: padding-box, $options.clip: border-box, $options.attachment: scroll, $shorthand: false, $important: false) { ... }

Description

Background mixin

Parameters

NameDescriptionTypeDefault value
$options

the background options

Object or Map—
$options.color

background color

Colortransparent
$options.image

background image

Imagenone
$options.position

background position

String or Array0 0
$options.size

background size

Stringauto
$options.repeat

background repeat

Stringrepeat
$options.origin

background origin

Stringpadding-box
$options.clip

background clip

Stringborder-box
$options.attachment

background attachment

Stringscroll
$shorthand

specifies if shorthand selector will be used or not

Booleanfalse
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.background-element {
  @include background(null url('http://test.com/image.png') null cover no-repeat null null fixed);
}

Output

.background-element {
  background-color: transparent;
  background-image: url('http://test.com/image.png');
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-clip: border-box;
  background-attachment: fixed;
}

Usage Shorthand

.background-element {
  @include background((
    image: url('http://test.com/image.png'),
    size: cover,
    repeat: no-repeat,
    attachment: fixed
  ), true);
}

Output Shorthand

.background-element {
  background: transparent url('http://test.com/image.png') 0 0/cover no-repeat padding-box border-box fixed;
}

Requires

Author

  • blackmirror1980

variables

[private] background-attachment-modes

$background-attachment-modes: array-concat((scroll, fixed, local), $css-default-modes);

Description

Background attachment modes

Type

List

Used by

Author

  • blackmirror1980

[private] background-image-modes

$background-image-modes: array-concat((none), $css-default-modes);

Description

Background image modes

Type

List

Used by

Author

  • blackmirror1980

[private] background-origin-clip-modes

$background-origin-clip-modes: array-concat((border-box, padding-box, content-box), $css-default-modes);

Description

Background origin and background clip modes

Type

List

Used by

Author

  • blackmirror1980

[private] background-position-horizontal-modes

$background-position-horizontal-modes: array-concat((left, center, right), $css-default-modes);

Description

Background position horizontal modes

Type

List

Used by

Author

  • blackmirror1980

[private] background-repeat-modes

$background-repeat-modes: array-concat((repeat, repeat-x, repeat-y, no-repeat), $css-default-modes);

Description

Background repeat modes

Type

List

Used by

Author

  • blackmirror1980

[private] background-size-modes

$background-size-modes: array-concat((auto, cover, contain), $css-default-modes);

Description

Background size modes

Type

List

Used by

Author

  • blackmirror1980

[private] background-position-vertical-modes

$background-position-vertical-modes: array-concat((top, center, bottom), $css-default-modes);

Description

Background position vertical modes

Type

List

Used by

Author

  • blackmirror1980

Mixins - Border

functions

is-border-radius

@function is-border-radius($br) { ... }

Description

Checks if something is border radius value

Parameters

NameDescriptionTypeDefault value
$br

the border-radius value

String—

Returns

Boolean —

true if is border-radius value

Requires

Used by

Author

  • blackmirror1980

is-border-style

@function is-border-style($bs) { ... }

Description

Checks if something is border style mode

Parameters

NameDescriptionTypeDefault value
$bs

the border-style mode

String—

Returns

Boolean —

true if is border-style value

Requires

Used by

Author

  • blackmirror1980

is-border-mode

@function is-border-mode($bm) { ... }

Description

Checks if something is border mode (none, initial, inherit)

Parameters

NameDescriptionTypeDefault value
$bm

the border mode

String—

Returns

Boolean —

true if is border mode

Requires

Used by

Author

  • blackmirror1980

mixins

border-color

@mixin border-color($color: transparent, $border-selector: border, $important: false) { ... }

Description

Border color mixin

Parameters

NameDescriptionTypeDefault value
$color

border-color

Colortransparent
$border-selector

border selector to use

Stringborder
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-color-element {
  @include border-color(red);
}

Output

.border-color-element {
  border-color: red;
}

Requires

Used by

Links

Author

  • blackmirror1980

border-width

@mixin border-width($width: 0, $border-selector: border, $important: false) { ... }

Description

Border width mixin

Parameters

NameDescriptionTypeDefault value
$width

border-width

Size0
$border-selector

border-selector will be used as property name

Stringborder
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-width-element {
  @include border-width(1px);
}

Output

.border-width-element {
  border-width: 1px;
}

Requires

Used by

Links

Author

  • blackmirror1980

border-style

@mixin border-style($style: solid, $border-selector: border, $important: false) { ... }

Description

Border style mixin

Parameters

NameDescriptionTypeDefault value
$style

border-style

Stringsolid
$border-selector

border-selector, will be used as selector

Stringborder
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-style-element {
  @include border-style(dashed);
}

Output

.border-style-element {
  border-style: dashed;
}

Requires

Used by

Links

Author

  • blackmirror1980

border-top-color

@mixin border-top-color() { ... }

Description

Border top color mixin

Parameters

None.

Example

Usage

.border-top-color-element {
  @include border-top-color(red);
}

Output

.border-top-color-element {
  border-top-color: red;
}

Requires

See

Author

  • blackmirror1980

border-top-width

@mixin border-top-width($width: 0, $important: false) { ... }

Description

Border top width mixin

Parameters

NameDescriptionTypeDefault value
$width

border-width

Size0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-top-width-element {
  @include border-top-width(1px);
}

Output

.border-top-width-element {
  border-top-width: 1px;
}

Requires

See

Author

  • blackmirror1980

border-right-color

@mixin border-right-color() { ... }

Description

Border right color mixin

Parameters

None.

Example

Usage

.border-right-color-element {
  @include border-right-color(red);
}

Output

.border-right-color-element {
  border-right-color: red;
}

Requires

See

Author

  • blackmirror1980

border-top-style

@mixin border-top-style($style: solid, $important: false) { ... }

Description

Border top style mixin

Parameters

NameDescriptionTypeDefault value
$style

border-style

Stringsolid
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-top-style-element {
  @include border-top-style(dashed);
}

Output

.border-top-style-element {
  border-top-style: dashed;
}

Requires

See

Author

  • blackmirror1980

border

@mixin border($options, $options.size: 0, $options.style: solid, $options.color: transparent, $options.radius: null, $border-selector: border, $shorthand: true, $important: false) { ... }

Description

Border mixin

Parameters

NameDescriptionTypeDefault value
$options

the border options

String or Object or Map—
$options.size

border-width

Size0
$options.style

border-style

Stringsolid
$options.color

border-color

Colortransparent
$options.radius

border-radius

Sizenull
$border-selector

used for the border selector

Stringborder
$shorthand

if true, renders the shorthand form of border selector

Booleantrue
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-element {
  @include border(1px null red);
}

Output

.border-element {
  border: 1px solid red;
}

Usage - with object parameter

.border-element {
  @include border((
    size: 2px,
    color: black
  );
}

Output - with object parameter

.border-element {
  border: 2px solid black;
}

Requires

Used by

Links

Author

  • blackmirror1980

border-right-width

@mixin border-right-width($width: 0, $important: false) { ... }

Description

Border right width mixin

Parameters

NameDescriptionTypeDefault value
$width

border-width

Size0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-right-width-element {
  @include border-right-width(1px);
}

Output

.border-right-width-element {
  border-right-width: 1px;
}

Requires

See

Author

  • blackmirror1980

border-bottom-color

@mixin border-bottom-color() { ... }

Description

Border bottom color mixin

Parameters

None.

Example

Usage

.border-bottom-color-element {
  @include border-bottom-color(red);
}

Output

.border-bottom-color-element {
  border-bottom-color: red;
}

Requires

See

Author

  • blackmirror1980

border-right-style

@mixin border-right-style($style: solid, $important: false) { ... }

Description

Border right style mixin

Parameters

NameDescriptionTypeDefault value
$style

border-style

Stringsolid
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-right-style-element {
  @include border-right-style(dashed);
}

Output

.border-right-style-element {
  border-right-style: dashed;
}

Requires

See

Author

  • blackmirror1980

border-radius

@mixin border-radius($br: 0, $shorthand: false, $important: false) { ... }

Description

Border radius mixin

Parameters

NameDescriptionTypeDefault value
$br

the border radius

Size or Array or List0
$shorthand

if true, uses the shorthand selector

Booleanfalse
$important

if true, will render the important rule

Booleanfalse

Example

Usage - One value

.border-radius-element {
  @include border-radius(0);
}

Output - One value

.border-radius-element {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Usage - Two values

.border-radius-element {
  @include border-radius(0 50%);
}

Output - Two values

.border-radius-element {
  border-top-left-radius: 0;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 50%;
}

Usage - Three values

.border-radius-element {
  @include border-radius(10px 50% 30px);
}

Output - Three values

.border-radius-element {
  border-top-left-radius: 10px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 50%;
}

Usage - Four values

.border-radius-element {
  @include border-radius(10px 50% 30px 20%);
}

Output - Four values

.border-radius-element {
  border-top-left-radius: 10px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 20%;
}

Usage - Shorthand

.border-radius-element {
  @include border-radius(10px 50% 30px 20%, true);
}

Output - Shorthand

.border-radius-element {
  border-radius: 10px 50% 30px 20%;
}

Requires

Used by

TODO's

  • manage fractions (e.g. 2em 1em 4em / 0.5em 0.2em)

Links

Author

  • blackmirror1980

border-bottom-width

@mixin border-bottom-width($width: 0, $important: false) { ... }

Description

Border bottom width mixin

Parameters

NameDescriptionTypeDefault value
$width

border-width

Size0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-bottom-width-element {
  @include border-bottom-width(1px);
}

Output

.border-bottom-width-element {
  border-bottom-width: 1px;
}

Requires

See

Author

  • blackmirror1980

border-left-color

@mixin border-left-color() { ... }

Description

Border left color mixin

Parameters

None.

Example

Usage

.border-left-color-element {
  @include border-left-color(red);
}

Output

.border-left-color-element {
  border-left-color: red;
}

Requires

See

Author

  • blackmirror1980

border-bottom-style

@mixin border-bottom-style($style: solid, $important: false) { ... }

Description

Border bottom style mixin

Parameters

NameDescriptionTypeDefault value
$style

border-style

Stringsolid
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-bottom-style-element {
  @include border-bottom-style(dashed);
}

Output

.border-bottom-style-element {
  border-bottom-style: dashed;
}

Requires

See

Author

  • blackmirror1980

border-left-width

@mixin border-left-width($width: 0, $important: false) { ... }

Description

Border left width mixin

Parameters

NameDescriptionTypeDefault value
$width

border-width

Size0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-left-width-element {
  @include border-left-width(1px);
}

Output

.border-left-width-element {
  border-left-width: 1px;
}

Requires

See

Author

  • blackmirror1980

border-left-style

@mixin border-left-style($style: solid, $important: false) { ... }

Description

Border left style mixin

Parameters

NameDescriptionTypeDefault value
$style

border-style

Stringsolid
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-left-style-element {
  @include border-left-style(dashed);
}

Output

.border-left-style-element {
  border-left-style: dashed;
}

Requires

See

Author

  • blackmirror1980

border-top

@mixin border-top($options, $important: false) { ... }

Description

Border top mixin

Parameters

NameDescriptionTypeDefault value
$options

the border options

String or Object or Map—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-element {
  @include border-top(1px null red);
}

Output

.border-element {
  border-top: 1px solid red;
}

Requires

See

Author

  • blackmirror1980

border-top-radius

@mixin border-top-radius($br: 0, $important: false) { ... }

Description

Border top radius mixin

Parameters

NameDescriptionTypeDefault value
$br

the border radius

Size0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-radius-element {
  @include border-top-radius(15px);
}

Output

.border-radius-element {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

Requires

Links

Author

  • blackmirror1980

border-right

@mixin border-right($options, $important: false) { ... }

Description

Border right mixin

Parameters

NameDescriptionTypeDefault value
$options

the border options

String or Object or Map—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-element {
  @include border-right(1px null red);
}

Output

.border-element {
  border-right: 1px solid red;
}

Requires

See

Author

  • blackmirror1980

border-right-radius

@mixin border-right-radius($br: 0, $important: false) { ... }

Description

Border right radius mixin

Parameters

NameDescriptionTypeDefault value
$br

the border radius

Size0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-radius-element {
  @include border-right-radius(15px);
}

Output

.border-radius-element {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

Requires

Links

Author

  • blackmirror1980

border-bottom

@mixin border-bottom($options, $important: false) { ... }

Description

Border bottom mixin

Parameters

NameDescriptionTypeDefault value
$options

the border options

String or Object or Map—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-element {
  @include border-bottom(1px null red);
}

Output

.border-element {
  border-bottom: 1px solid red;
}

Requires

See

Author

  • blackmirror1980

border-bottom-radius

@mixin border-bottom-radius($br: 0, $important: false) { ... }

Description

Border bottom radius mixin

Parameters

NameDescriptionTypeDefault value
$br

the border radius

Size0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-radius-element {
  @include border-bottom-radius(15px);
}

Output

.border-radius-element {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

Requires

Links

Author

  • blackmirror1980

border-left

@mixin border-left($options, $important: false) { ... }

Description

Border left mixin

Parameters

NameDescriptionTypeDefault value
$options

the border options

String or Object or Map—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-element {
  @include border-left(1px null red);
}

Output

.border-element {
  border-left: 1px solid red;
}

Requires

See

Author

  • blackmirror1980

border-left-radius

@mixin border-left-radius($br: 0, $important: false) { ... }

Description

Border left radius mixin

Parameters

NameDescriptionTypeDefault value
$br

the border radius

Size0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.border-radius-element {
  @include border-left-radius(15px);
}

Output

.border-radius-element {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

Requires

Links

Author

  • blackmirror1980

variables

[private] border-styles

$border-styles: array-concat((none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), $css-default-modes);

Description

Border style modes

Type

List

Used by

Author

  • blackmirror1980

[private] border-modes

$border-modes: array-concat((none), $css-default-modes);

Description

Border modes

Type

List

Used by

Author

  • blackmirror1980

Mixins - Box

mixins

reset-inline-block

@mixin reset-inline-block() { ... }

Description

Reset inline-block mixin (useful to fix those annoying auto margins between inline-block children elements

Parameters

None.

Requires

Used by

Author

  • blackmirror1980

display

@mixin display($dm, $auto-reset-inline-block: false, $important: false) { ... }

Description

Display mixin

Parameters

NameDescriptionTypeDefault value
$dm

the display mode

String—
$auto-reset-inline-block

auto resets inline block

Booleanfalse
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.display-element {
  @include display(block);
}

Output

.display-element {
  display: block;
}

Usage inline-block

.display-element {
  @include display(inline-block);
}

Output inline-block

.display-element {
  display: inline-block;
}

Usage inline-block with auto reset

.display-element {
  @include display(inline-block, true);
}

Output inline-block with auto reset

.display-element {
  display: inline-block;
  letter-spacing: -.3em;
  line-height: 0;
  text-rendering: optimizeSpeed;

  > * {
    letter-spacing: initial;
    line-height: initial;
  }
}

Requires

Used by

Author

  • blackmirror1980

box-sizing

@mixin box-sizing($bs, $important: false) { ... }

Description

Box sizing mixin

Parameters

NameDescriptionTypeDefault value
$bs

the box sizing mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.box-sizing-element {
  @include box-sizing(content-box);
}

Output

.box-sizing-element {
  box-sizing: content-box;
}

Requires

Author

  • blackmirror1980

box-bounds

@mixin box-bounds($options, $options.min-width: null, $options.min-height: null, $options.max-width: null, $options.max-height: null, $important: false) { ... }

Description

Box bounds mixin
useful to set min/max width & height in one shot

Parameters

NameDescriptionTypeDefault value
$options

the bounds options

Object or Map—
$options.min-width

the min width bound

Size or Percentagenull
$options.min-height

the min height bound

Size or Percentagenull
$options.max-width

the max width bound

Size or Percentagenull
$options.max-height

the max height bound

Size or Percentagenull
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.bounds-element {
  @include box-bounds(10% null null 610px);
}

Output

.bounds-element {
  min-width: 10%;
  max-height: 610px
}

Requires

Used by

Author

  • blackmirror1980

box-size

@mixin box-size($options, $options.width: null, $options.height: null, $options.min-width: null, $options.min-height: null, $options.max-width: null, $options.max-height: null, $height-fallback: true, $important: false) { ... }

Description

Box size mixin
used to set size & bounds in one shot

Parameters

NameDescriptionTypeDefault value
$options

the bounds options

Object or Map—
$options.width

the min width bound

Size or Percentagenull
$options.height

the min width bound

Size or Percentagenull
$options.min-width

the min width bound

Size or Percentagenull
$options.min-height

the min height bound

Size or Percentagenull
$options.max-width

the max width bound

Size or Percentagenull
$options.max-height

the max height bound

Size or Percentagenull
$height-fallback

falls back the height value to the width value, if height is not specified (useful for square sizes)

Booleantrue
$important

if true, will render the important rule

Booleanfalse

Example

Usage - height fallback

.size-element {
  @include box-size(100px);
}

Output - height fallback

.size-element {
  width: 100px;
  height: 100px;
}

Usage - no height fallback

.size-element {
  @include box-size(100px, false);
}

Output - no height fallback

.size-element {
  width: 100px;
}

Usage - height only

.size-element {
  @include box-size(null 250px);
}

Output - height only

.size-element {
  height: 250px;
}

Usage - full usage

.size-element {
  @include box-size(100% auto 30px 0 100% 250px);
}

Output - full usage

.size-element {
  width: 100%;
  height: auto;
  min-width: 30px;
  min-height: 0;
  max-width: 100%;
  max-height: 250px;
}

Requires

Used by

Author

  • blackmirror1980

box-color

@mixin box-color($options, $options.color: inherit, $options.bgcolor: inherit, $important: false) { ... }

Description

Box color mixin
used to set color & background color in one shot

Parameters

NameDescriptionTypeDefault value
$options

the box color options

Object or Map—
$options.color

the color

Colorinherit
$options.bgcolor

the background color

Colorinherit
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.box-color-element {
  @include box-color(#ffa transparent);
}

Output

.box-color-element {
  color: #ffa;
  background-color: transparent;
}

Requires

Used by

Author

  • blackmirror1980

box-shadow

@mixin box-shadow($box-shadows...) { ... }

Description

Box shadow mixin

Parameters

NameDescriptionTypeDefault value
$box-shadows...

the box shadows list

Shadow—

Example

Usage

.box-shadow-element {
  @include box-shadow(0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000);
}

Output

.box-shadow-element {
  -webkit-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
  -moz-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
  -ms-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
  -o-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
  box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
}

Requires

Author

  • blackmirror1980

z-index

@mixin z-index($zi, $important: false) { ... }

Description

Z-index mixin

Parameters

NameDescriptionTypeDefault value
$zi

the z-index

Integer or String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.z-index-element {
  @include z-index(1);
}

Output

.z-index-element {
  z-index: 1;
}

Requires

Author

  • blackmirror1980

visibility

@mixin visibility($v, $important: false) { ... }

Description

Visibility mixin

Parameters

NameDescriptionTypeDefault value
$v

the visibility

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.visibility-element {
  @include visibility(hidden);
}

Output

.visibility-element {
  visibility: hidden;
}

Requires

Author

  • blackmirror1980

backface-visibility

@mixin backface-visibility($bv, $important: false) { ... }

Description

Backface visibility mixin

Parameters

NameDescriptionTypeDefault value
$bv

the backface visibility

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.backface-visibility-element {
  @include backface-visibility(visible);
}

Output

.backface-visibility-element {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  -ms-backface-visibility: visible;
  -o-backface-visibility: visible;
  backface-visibility: visible;
}

Requires

Author

  • blackmirror1980

aspect-ratio

@mixin aspect-ratio($width: 1, $height: 1, $content-selector: '.content') { ... }

Description

Aspect ratio mixin

Parameters

NameDescriptionTypeDefault value
$width

desired width for aspect ratio calculation

Integer or Size1
$height

desired height for aspect ratio calculation

Integer or Size1
$content-selector

desired content selector

Integer or Size'.content'

Example

Usage

.aspect-ratio-element {
  @include aspect-ratio(170px, 20px);
}

Output

.aspect-ratio-element {
  position: relative;
  display: inline-block; // so you can use text align to align the element

  &:before {
    display: inline-block;
    width: 100%;
    padding-top: 11,764705882352941%; // = 20 / 170 * 100%
    content: '';
  }

  > .content {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

Requires

Author

  • blackmirror1980

functions

is-display

@function is-display($dm) { ... }

Description

Checks if something is a correct display mode

Parameters

NameDescriptionTypeDefault value
$dm

the display mode

String—

Returns

Boolean —

true if is display mode

Requires

Used by

Author

  • blackmirror1980

is-box-sizing

@function is-box-sizing($bs) { ... }

Description

Checks if something is box sizing mode

Parameters

NameDescriptionTypeDefault value
$bs

the box-sizing mode

String—

Returns

Boolean —

true if is box-sizing mode

Requires

Used by

Author

  • blackmirror1980

is-box-size

@function is-box-size($s) { ... }

Description

Checks if something is box size

Parameters

NameDescriptionTypeDefault value
$s

the box size value

Size or String—

Returns

Boolean —

true if is box size value

Requires

Used by

Author

  • blackmirror1980

is-box-bound-size

@function is-box-bound-size($s) { ... }

Description

Checks if something is box bound size

Parameters

NameDescriptionTypeDefault value
$s

the box bound size value

Size or String—

Returns

Boolean —

true if is box bound size value

Requires

Used by

Author

  • blackmirror1980

is-box-shadow-mode

@function is-box-shadow-mode($bsm) { ... }

Description

Checks if something is box shadow mode

Parameters

NameDescriptionTypeDefault value
$bsm

the box-shadow mode

String—

Returns

Boolean —

true if is box-shadow mode

Requires

Used by

Author

  • blackmirror1980

is-box-shadow

@function is-box-shadow($box-shadow) { ... }

Description

Checks if something is box shadow value

Parameters

NameDescriptionTypeDefault value
$box-shadow

the box-shadow value

Any—

Returns

Boolean —

true if is box-shadow value

Requires

Used by

Author

  • blackmirror1980

is-box-shadows

@function is-box-shadows($box-shadows) { ... }

Description

Checks if a list is a box-shadow values list (e.g. 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000)

Parameters

NameDescriptionTypeDefault value
$box-shadows

the box-shadow values list

Array or List—

Returns

Boolean —

true if is box-shadow values list

Requires

Used by

Author

  • blackmirror1980

is-z-index

@function is-z-index($zi) { ... }

Description

Checks if something is z-index value

Parameters

NameDescriptionTypeDefault value
$zi

the z-index value

Integer or String—

Returns

Boolean —

true if is z-index value

Requires

Used by

Author

  • blackmirror1980

is-visibility

@function is-visibility($vm) { ... }

Description

Checks if something is supported visibility mode

Parameters

NameDescriptionTypeDefault value
$vm

the visibility mode

String—

Returns

Boolean —

true if is visibility mode

Requires

Used by

Author

  • blackmirror1980

is-backface-visibility

@function is-backface-visibility($bv) { ... }

Description

Checks if something is supported backface-visibility mode

Parameters

NameDescriptionTypeDefault value
$bv

the backface-visibility mode

String—

Returns

Boolean —

true if is backface-visibility mode

Requires

Used by

Author

  • blackmirror1980

aspect-ratio-factor

@function aspect-ratio-factor($width: 1, $height: 1) { ... }

Description

Returns the aspect-ratio-factor in percentage for the aspect-ratio padding-top

Parameters

NameDescriptionTypeDefault value
$width

desired width for aspect ratio calculation

Integer or Size1
$height

desired height for aspect ratio calculation

Integer or Size1

Returns

Percentage —

the calculated percentage of the aspect-ratio-factor

Requires

Used by

Author

  • blackmirror1980

variables

[private] display-modes

$display-modes: array-concat((none, inline, block, inline-block, flex, inline-flex, grid, inline-grid, table, inline-table, table-caption, table-header-group, table-row-group, table-column-group, table-footer-group, table-row, table-column, table-cell, list-item, run-in, contents), $css-default-modes);

Description

Display modes

Type

List

Used by

Author

  • blackmirror1980

[private] box-sizing-modes

$box-sizing-modes: array-concat((content-box, border-box), $css-default-modes);

Description

Box sizing modes

Type

List

Used by

Author

  • blackmirror1980

[private] box-size-modes

$box-size-modes: array-concat((auto), $css-default-modes);

Description

Box size modes

Type

List

Used by

Author

  • blackmirror1980

[private] box-bound-size-modes

$box-bound-size-modes: array-concat((none), $css-default-modes);

Description

Box bound size modes

Type

List

Used by

Author

  • blackmirror1980

[private] box-shadow-modes

$box-shadow-modes: array-concat((none), $css-default-modes);

Description

Box shadow modes

Type

List

Used by

Author

  • blackmirror1980

[private] z-index-modes

$z-index-modes: array-concat((auto), $css-default-modes);

Description

Z-index modes

Type

List

Used by

Author

  • blackmirror1980

[private] visibility-modes

$visibility-modes: array-concat((visible, hidden, collapse), $css-default-modes);

Description

Visibility modes

Type

List

Used by

Author

  • blackmirror1980

[private] backface-visibility-modes

$backface-visibility-modes: array-concat((visible, hidden), $css-default-modes);

Description

Backface visibility modes

Type

List

Used by

Author

  • blackmirror1980

Mixins - Common

functions

important

@function important($important: false) { ... }

Description

Gets important attribute based on a boolean flag

Parameters

NameDescriptionTypeDefault value
$important

important boolean flag

Booleanfalse

Returns

String —

the resulting string value

Used by

Author

  • blackmirror1980

rem

@function rem($px, $base: $font-size-base) { ... }

Description

Convert pixels to rems
eg. for a relational value of 12px write rem(12)
Assumes $base is the font-size of

Parameters

NameDescriptionTypeDefault value
$px

pixels size you want to convert

Size—
$base

html font-size base

Size$font-size-base

Returns

Size —

the size converted in rem based on html font-size

Requires

Author

  • blackmirror1980

px

@function px($px, $base: $font-size-base) { ... }

Description

Convert rems to pixels
eg. for a relational value of 12px write px(1.2rem) base on $font-size-base (10px)
Assumes $base is the font-size of

Parameters

NameDescriptionTypeDefault value
$px

pixels size you want to convert

Size—
$base

html font-size base

Size$font-size-base

Returns

Size —

the size converted in rem based on html font-size

Requires

Author

  • blackmirror1980

mixins

prefixer

@mixin prefixer($property, $values, $prefixes: $prefixes-default, $important: false) { ... }

Description

Prefixer mixin
for generating vendor prefixes on non-standardized properties.

Parameters

NameDescriptionTypeDefault value
$property

the property to prefix

String—
$values

the values list to use

Any—
$prefixes

space separated list

Array or List$prefixes-default
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.element {
  @include prefixer(border-radius, 10px, webkit moz spec);
}

Output

.element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Requires

Used by

Author

  • blackmirror1980

prefixer-at-rule

@mixin prefixer-at-rule($at-rule, $at-rule-suffix: null, $prefixes) { ... }

Description

Prefixer @Selector mixin
for generating vendor prefixes on non-standardized properties.

Parameters

NameDescriptionTypeDefault value
$at-rule

the at rule to prefix

String—
$at-rule-suffix

the suffix to add after the at-rule (eg. animation keyframes)

Stringnull
$prefixes

space separated list

Array or List—

Example

Usage

@include prefixer-at-rule(viewport, null, ms spec) {
  width: device-width;
};

Output

@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

Author

  • blackmirror1980

disable

@mixin disable($force: true, $important: false) { ... }

Description

Disable mixin
it forces the cursor to default and pointer-evento to none for an element and all of his children
it's compatible with IE11+

Parameters

NameDescriptionTypeDefault value
$force

if true, forces the disable for all children

Booleantrue
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.disable-element {
  @include disable;
}

Output

.disable-element {
  cursor: default;
  pointer-events: none;
}

.disable-element * {
  cursor: default;
  pointer-events: none;
}

Requires

Links

Author

  • blackmirror1980

hidden

@mixin hidden($important: false) { ... }

Description

Hidden mixin
visually hides an element without touching display or visibility selectors

Parameters

NameDescriptionTypeDefault value
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.hidden-element {
  @include hidden;
}

Output

.hidden-element {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(100%);
}

Requires

Author

  • blackmirror1980

variables

[private] animateable-properties

$animateable-properties: (background, background-color, background-position, background-size, border, border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-color, border-left, border-left-color, border-left-width, border-right, border-right-color, border-right-width, border-spacing, border-top, border-top-color, border-top-left-radius, border-top-right-radius, border-top-width, bottom, box-shadow, clip, clip-path, color, column-count, column-gap, column-rule, column-rule-color, column-rule-width, column-width, columns, filter, flex, flex-basis, flex-grow, flex-shrink, font, font-size, font-size-adjust font-stretch font-weight, height, left, letter-spacing, line-height, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, order, outline, outline-color, outline-offset, outline-width, padding, padding-bottom, padding-left, padding-right, padding-top, perspective, perspective-origin, right, text-decoration-color, text-indent, text-shadow, top, transform, transform-origin, vertical-align, visibility width, word-spacing, z-index);

Description

Animateable properties

Type

List

Author

  • blackmirror1980

Mixins - Cursor

functions

is-cursor

@function is-cursor($c) { ... }

Description

Checks if something is a correct cursor mode

Parameters

NameDescriptionTypeDefault value
$c

the cursor mode or url

String—

Returns

Boolean —

true if is cursor mode or url

Requires

Used by

Author

  • blackmirror1980

is-pointer-events

@function is-pointer-events($pe) { ... }

Description

Checks if something is a correct pointer-events mode

Parameters

NameDescriptionTypeDefault value
$pe

the pointer-events mode

String—

Returns

Boolean —

true if is pointer-events mode

Requires

Used by

Author

  • blackmirror1980

mixins

cursor

@mixin cursor($c: default, $force: false, $important: false) { ... }

Description

Cursor mixin

Parameters

NameDescriptionTypeDefault value
$c

the cursor mode

Stringdefault
$force

if true forces the cursor mode for all the child elements and before, after pseudo selectors

Booleanfalse
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.cursor-element {
  @include cursor(pointer);
}

Output

.cursor-element {
  cursor: pointer;
}

Usage - force mode

.cursor-element {
  @include cursor(pointer, true);
}

Output - force mode

.cursor-element {
  cursor: pointer;
}

.cursor-element:before,
.cursor-element:after {
  cursor: pointer;
}

.cursor-element * {
  cursor: pointer;
}

.cursor-element *:before,
.cursor-element *:after {
  cursor: pointer;
}

Requires

Used by

Links

Author

  • blackmirror1980

pointer-events

@mixin pointer-events($pe: auto, $important: false) { ... }

Description

Pointer events mixin

Parameters

NameDescriptionTypeDefault value
$pe

the pointer events mode

Stringauto
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.pointer-events-element {
  @include pointer-events(none);
}

Output

.pointer-events-element {
  pointer-events: none;
}

Requires

Used by

Links

Author

  • blackmirror1980

variables

[private] cursor-modes

$cursor-modes: array-concat((alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, grab, grabbing, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, vertical-text, w-resize, wait, zoom-in, zoom-out), $css-default-modes);

Description

Cursor modes

Type

List

Used by

Author

  • blackmirror1980

[private] pointer-events-modes

$pointer-events-modes: array-concat((all, auto, bounding-box, fill, none, painted, stroke, unset, visible, visiblefill, visiblepainted, visiblestroke), $css-default-modes);

Description

Pointer events modes

Type

List

Used by

Author

  • blackmirror1980

Mixins - Filter

functions

get-filter-function-name

@function get-filter-function-name($ff) { ... }

Description

Extracts filter function name from a string

Parameters

NameDescriptionTypeDefault value
$ff

the filter string (e.g. blur(5px))

String—

Returns

String</code> or <code>Null —

the filter function name or null

Requires

Used by

Author

  • blackmirror1980

is-filter-function

@function is-filter-function($ff) { ... }

Description

Checks if something is a filter function

Parameters

NameDescriptionTypeDefault value
$ff

the filter string (e.g. blur(5px))

String—

Returns

Boolean —

true if is filter function value

Requires

Used by

Author

  • blackmirror1980

is-filter

@function is-filter($filter) { ... }

Description

Checks if something is a filter mode or function

Parameters

NameDescriptionTypeDefault value
$filter

the filter string (e.g. blur(5px) or 'none)

String—

Returns

Boolean —

true if is filter mode or filter function value

Requires

Used by

Author

  • blackmirror1980

mixins

filter

@mixin filter($filter, $important: false) { ... }

Description

Filter mixin

Parameters

NameDescriptionTypeDefault value
$filter

the filter string (e.g. blur(5px) or none)

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.filter-element {
  @include filter(blur(5px));
}

Output

.filter-element {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}

Requires

TODO's

  • manage multiple filters

Author

  • blackmirror1980

opacity

@mixin opacity($o, $fallbacks: false, $important: false) { ... }

Description

Opacity mixin
cross-browser with fallbacks for ie old browsers opacity mixin

Parameters

NameDescriptionTypeDefault value
$o

the opacity value (e.g. .3 or 1)

Float—
$fallbacks

if true add fallbacksa for ie old browsers

Booleanfalse
$important

if true, will render the important rule

Booleanfalse

Example

Usage - default

.opacity-element {
  @include opacity(.3);
}

Output - default

.opacity-element {
  opacity: .3;
}

Usage - with fallbacks

.opacity-element {
  @include opacity(.3, true);
}

Output - with fallbacks

.opacity-element {
  filter: alpha(opacity=(30));
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  opacity: .3;
}

Requires

Links

Author

  • blackmirror1980

variables

[private] filter-functions-names

$filter-functions-names: (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, url);

Description

Filter functions

Type

List

Used by

Author

  • blackmirror1980

[private] filter-modes

$filter-modes: array-concat((none), $css-default-modes);

Description

Filter modes

Type

List

Used by

Author

  • blackmirror1980

mixins-flex

functions

is-flex-grow

@function is-flex-grow($fg) { ... }

Description

Checks if something is a support flex-grow value (number, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$fg

the flex-grow value

Number or Css-default-mode—

Returns

Boolean —

true if is flex-grow value

Requires

Used by

Links

Author

  • blackmirror1980

is-flex-shrink

@function is-flex-shrink($fs) { ... }

Description

Checks if something is a support flex-shrink value (number, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$fs

the flex-shrink value

Number or Css-default-mode—

Returns

Boolean —

true if is flex-shrink value

Requires

Used by

Links

Author

  • blackmirror1980

is-order

@function is-order($o) { ... }

Description

Checks if something is a support order value (number, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$o

the order value

Integer or Css-default-mode—

Returns

Boolean —

true if is order value

Requires

Used by

Links

Author

  • blackmirror1980

is-flex-basis

@function is-flex-basis($fb) { ... }

Description

Checks if something is a support flex-basis mode (auto, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$fb

the flex-basis value

String—

Returns

Boolean —

true if is flex-basis value

Requires

Used by

Links

Author

  • blackmirror1980

is-flex-direction

@function is-flex-direction($fd) { ... }

Description

Checks if something is a support flex-direction mode (row, row-reverse, column, column-reverse, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$fd

the flex-direction value

String—

Returns

Boolean —

true if is flex-direction value

Requires

Used by

Links

Author

  • blackmirror1980

is-flex-wrap

@function is-flex-wrap($fw) { ... }

Description

Checks if something is a support flex-wrap mode (nowrap, wrap, wrap-reverse, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$fw

the flex-wrap mode

String—

Returns

Boolean —

true if is flex-wrap mode

Requires

Used by

Links

Author

  • blackmirror1980

mixins

flex-grow

@mixin flex-grow($fg, $important: false) { ... }

Description

Flex grow mixin

Parameters

NameDescriptionTypeDefault value
$fg

the flex-grow value

Number or Css-default-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.flex-grow-element {
  @include flex-grow(2);
}

Output

.flex-grow-element {
  flex-grow: 2;
}

Requires

Author

  • blackmirror1980

flex-shrink

@mixin flex-shrink($fs, $important: false) { ... }

Description

Flex shrink mixin

Parameters

NameDescriptionTypeDefault value
$fs

the flex-shrink value

Number or Css-default-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.flex-shrink-element {
  @include flex-shrink(2);
}

Output

.flex-shrink-element {
  flex-shrink: 2;
}

Requires

Author

  • blackmirror1980

order

@mixin order($o, $important: false) { ... }

Description

Flex grow mixin

Parameters

NameDescriptionTypeDefault value
$o

the order value

Integer or Css-default-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.order-element {
  @include order(2);
}

Output

.order-element {
  order: 2;
}

Requires

Author

  • blackmirror1980

flex-flow

@mixin flex-flow($options, $options.direction: row, $options.wrap: nowrap, $shorthand: true, $important: false) { ... }

Description

Flex flow mixin - shorthand for flex-direction and flex-wrap

Parameters

NameDescriptionTypeDefault value
$options

the options

Object or Map—
$options.direction

the flex-direction value

Stringrow
$options.wrap

the flex-wrap value

Stringnowrap
$shorthand

if true, will render the flex-flow property instead of flex-direction and flex-wrap properties

Booleantrue
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.flex-flow-element {
  @include flex-flow(row-reverse wrap);
}

Output

.flex-flow-element {
  flex-flow: row-reverse wrap;
}

Requires

Author

  • blackmirror1980

flex-basis

@mixin flex-basis($fb, $important: false) { ... }

Description

Flex basis mixin

Parameters

NameDescriptionTypeDefault value
$fb

the flex-basis mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.flex-basis-element {
  @include flex-basis(200px);
}

Output

.flex-basis-element {
  flex-basis: 200px;
}

Requires

Author

  • blackmirror1980

flex-direction

@mixin flex-direction($fd, $important: false) { ... }

Description

Flex direction mixin

Parameters

NameDescriptionTypeDefault value
$fd

the flex-direction mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.flex-direction-element {
  @include flex-direction(column);
}

Output

.flex-direction-element {
  flex-direction: column;
}

Requires

Used by

Author

  • blackmirror1980

flex-wrap

@mixin flex-wrap($fw, $important: false) { ... }

Description

Flex wrap mixin

Parameters

NameDescriptionTypeDefault value
$fw

the flex-wrap mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.flex-wrap-element {
  @include flex-wrap(wrap);
}

Output

.flex-wrap-element {
  flex-wrap: wrap;
}

Requires

Used by

Author

  • blackmirror1980

variables

[private] flex-basis-modes

$flex-basis-modes: array-concat((auto), $css-default-modes);

Description

Flex basis modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] flex-direction-modes

$flex-direction-modes: array-concat((row, row-reverse, column, column-reverse), $css-default-modes);

Description

Flex direction modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] flex-wrap-modes

$flex-wrap-modes: array-concat((nowrap, wrap, wrap-reverse), $css-default-modes);

Description

Flex wrap modes supported

Type

List

Used by

Author

  • blackmirror1980

mixins-flex-grid

functions

is-align-content

@function is-align-content($ac) { ... }

Description

Checks if something is a support align-content mode (normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$ac

the align-content value

String—

Returns

Boolean —

true if is align-content value

Requires

Used by

Links

Author

  • blackmirror1980

is-align-items

@function is-align-items($ai) { ... }

Description

Checks if something is a support align-items mode (normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$ai

the align-items value

String—

Returns

Boolean —

true if is align-items value

Requires

Used by

Links

Author

  • blackmirror1980

is-align-self

@function is-align-self($as) { ... }

Description

Checks if something is a support align-self mode (normal, auto, center, stretch, self-start, self-end, flex-start, flex-end, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$as

the align-self value

String—

Returns

Boolean —

true if is align-self value

Requires

Used by

Links

Author

  • blackmirror1980

is-justify-content

@function is-justify-content($jc) { ... }

Description

Checks if something is a support justify-content mode (normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$jc

the justify-content value

String—

Returns

Boolean —

true if is justify-content value

Requires

Used by

Links

Author

  • blackmirror1980

is-justify-items

@function is-justify-items($ji) { ... }

Description

Checks if something is a support justify-items mode (normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$ji

the justify-items value

String—

Returns

Boolean —

true if is justify-items value

Requires

Used by

Links

Author

  • blackmirror1980

is-justify-self

@function is-justify-self($js) { ... }

Description

Checks if something is a support justify-self mode (normal, auto, center, stretch, self-start, self-end, flex-start, flex-end, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$js

the justify-self value

String—

Returns

Boolean —

true if is justify-self value

Requires

Used by

Links

Author

  • blackmirror1980

mixins

place-content

@mixin place-content($options, $options.align-content: stretch, $options.justify-content: flex-start, $shorthand: true, $important: false) { ... }

Description

Place content mixin - shorthand for align-content and justify-content

Parameters

NameDescriptionTypeDefault value
$options

the options

Object or Map—
$options.align-content

the align-content value

Stringstretch
$options.justify-content

the justify-content value

Stringflex-start
$shorthand

if true, will render the place-content property instead of align-content and justify-content properties

Booleantrue
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.place-content-element {
  @include place-content(space-between stretch);
}

Output

.place-content-element {
  place-content: space-between stretch;
}

Requires

Author

  • blackmirror1980

place-items

@mixin place-items($options, $options.align-items: stretch, $options.justify-items: flex-start, $shorthand: true, $important: false) { ... }

Description

Place items mixin - shorthand for align-items and justify-items

Parameters

NameDescriptionTypeDefault value
$options

the options

Object or Map—
$options.align-items

the align-items value

Stringstretch
$options.justify-items

the justify-items value

Stringflex-start
$shorthand

if true, will render the place-items property instead of align-items and justify-items properties

Booleantrue
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.place-items-element {
  @include place-items(space-between stretch);
}

Output

.place-items-element {
  place-items: space-between stretch;
}

Requires

Author

  • blackmirror1980

align-content

@mixin align-content($ac, $important: false) { ... }

Description

Align Content mixin

Parameters

NameDescriptionTypeDefault value
$ac

the align-content mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.align-content-element {
  @include align-content(stretch);
}

Output

.align-content-element {
  align-content: stretch;
}

Requires

Used by

Author

  • blackmirror1980

align-items

@mixin align-items($ai, $important: false) { ... }

Description

Align Items mixin

Parameters

NameDescriptionTypeDefault value
$ai

the align-items mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.align-items-element {
  @include align-items(stretch);
}

Output

.align-items-element {
  align-items: stretch;
}

Requires

Used by

Author

  • blackmirror1980

align-self

@mixin align-self($as, $important: false) { ... }

Description

Flex Align Self mixin

Parameters

NameDescriptionTypeDefault value
$as

the align-self mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.align-self-element {
  @include align-self(auto);
}

Output

.align-self-element {
  align-self: auto;
}

Requires

Author

  • blackmirror1980

justify-content

@mixin justify-content($jc, $important: false) { ... }

Description

Justify Content mixin

Parameters

NameDescriptionTypeDefault value
$jc

the justify-content mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.justify-content-element {
  @include justify-content(stretch);
}

Output

.justify-content-element {
  justify-content: stretch;
}

Requires

Used by

Author

  • blackmirror1980

justify-items

@mixin justify-items($ji, $important: false) { ... }

Description

Justify Items mixin

Parameters

NameDescriptionTypeDefault value
$ji

the justify-items mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.justify-items-element {
  @include justify-items(stretch);
}

Output

.justify-items-element {
  justify-items: stretch;
}

Requires

Used by

Author

  • blackmirror1980

justify-self

@mixin justify-self($js, $important: false) { ... }

Description

Flex Justify Self mixin

Parameters

NameDescriptionTypeDefault value
$js

the justify-self mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.justify-self-element {
  @include justify-self(auto);
}

Output

.justify-self-element {
  justify-self: auto;
}

Requires

Author

  • blackmirror1980

variables

[private] align-content-modes

$align-content-modes: array-concat((normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly), $css-default-modes);

Description

Align Content modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] align-items-modes

$align-items-modes: array-concat((normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly), $css-default-modes);

Description

Align Items modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] align-self-modes

$align-self-modes: array-concat((normal, auto, center, stretch, self-start, self-end, flex-start, flex-end), $css-default-modes);

Description

Align Self modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] justify-content-modes

$justify-content-modes: array-concat((normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly), $css-default-modes);

Description

Justify Content modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] justify-items-modes

$justify-items-modes: array-concat((normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly), $css-default-modes);

Description

Justify Items modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] justify-self-modes

$justify-self-modes: array-concat((normal, auto, center, stretch, self-start, self-end, flex-start, flex-end), $css-default-modes);

Description

Justify Self modes supported

Type

List

Used by

Author

  • blackmirror1980

mixins-float

functions

is-clear

@function is-clear($f) { ... }

Description

Checks if clear mode is valid (none, left, right, both, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$f

the clear value

String—

Returns

Boolean —

true if is clear value

Requires

Used by

Links

Author

  • blackmirror1980

is-float

@function is-float($f) { ... }

Description

Checks if float mode is valid (none, left, right, inherit, initial)

Parameters

NameDescriptionTypeDefault value
$f

the float value

String—

Returns

Boolean —

true if is float value

Requires

Used by

Links

Author

  • blackmirror1980

mixins

clear

@mixin clear($clear, $important: false) { ... }

Description

Clear mixin

Parameters

NameDescriptionTypeDefault value
$clear

the clear value (e.g. left or none)

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.clear-element {
  @include clear(left);
}

Output

.clear-element {
  clear: left;
}

Requires

Author

  • blackmirror1980

float

@mixin float($float, $important: false) { ... }

Description

Float mixin

Parameters

NameDescriptionTypeDefault value
$float

the float value (e.g. left or none)

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.float-element {
  @include float(left);
}

Output

.float-element {
  float: left;
}

Requires

Author

  • blackmirror1980

variables

[private] clear-modes

$clear-modes: array-concat((none, left, right, both), $css-default-modes);

Description

Clear modes supported

Type

List

Used by

Author

  • blackmirror1980

[private] float-modes

$float-modes: array-concat((none, left, right), $css-default-modes);

Description

Float modes supported

Type

List

Used by

Author

  • blackmirror1980

Mixins - Margin

functions

is-margin

@function is-margin($m) { ... }

Description

Checks if something is a margin value

Parameters

NameDescriptionTypeDefault value
$m

the margin value (e.g. auto or 20px)

String or Length—

Returns

Boolean —

true if is margin value

Requires

Used by

Author

  • blackmirror1980

mixins

margin-direction

@mixin margin-direction($m, $margin-direction-selector: margin, $important: false) { ... }

Description

Margin direction mixin

Parameters

NameDescriptionTypeDefault value
$m

the margin value (e.g. auto or 20px)

String or Length—
$margin-direction-selector

the margin direction (e.g. margin-top)

Stringmargin
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.margin-direction-element {
  @include margin-direction(5px);
}

Output

.margin-direction-element {
  margin: 5px;
}

Usage - margin-left

.margin-direction-element {
  @include margin-direction(5px, margin-left);
}

Output - margin-left

.margin-direction-element {
  margin-left: 5px;
}

Requires

Used by

Author

  • blackmirror1980

margin-top

@mixin margin-top($m, $important: false) { ... }

Description

Margin top mixin

Parameters

NameDescriptionTypeDefault value
$m

the margin value (e.g. auto or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.margin-top-element {
  @include margin-top(5px);
}

Output

.margin-top-element {
  margin-top: 5px;
}

Requires

Used by

See

Author

  • blackmirror1980

margin-right

@mixin margin-right($m, $important: false) { ... }

Description

Margin right mixin

Parameters

NameDescriptionTypeDefault value
$m

the margin value (e.g. auto or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.margin-right-element {
  @include margin-right(5px);
}

Output

.margin-right-element {
  margin-right: 5px;
}

Requires

Used by

See

Author

  • blackmirror1980

margin-bottom

@mixin margin-bottom($m, $important: false) { ... }

Description

Margin bottom mixin

Parameters

NameDescriptionTypeDefault value
$m

the margin value (e.g. auto or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.margin-bottom-element {
  @include margin-bottom(5px);
}

Output

.margin-bottom-element {
  margin-bottom: 5px;
}

Requires

Used by

See

Author

  • blackmirror1980

margin-left

@mixin margin-left($m, $important: false) { ... }

Description

Margin left mixin

Parameters

NameDescriptionTypeDefault value
$m

the margin value (e.g. auto or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.margin-left-element {
  @include margin-left(5px);
}

Output

.margin-left-element {
  margin-left: 5px;
}

Requires

Used by

See

Author

  • blackmirror1980

margin

@mixin margin($m, $important: false) { ... }

Description

Margin mixin

Parameters

NameDescriptionTypeDefault value
$m

the margin value (e.g. auto or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage - single value

.margin-element {
  @include margin(5px);
}

Output - single value

.margin-element {
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}

Usage - two values

.margin-element {
  @include margin(5px 10px);
}

Output - two values

.margin-element {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
}

Usage - three values

.margin-element {
  @include margin(5px 10px 7px);
}

Output - three values

.margin-element {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 7px;
  margin-left: 10px;
}

Usage - four values

.margin-element {
  @include margin(5px 10px 7px 15px);
}

Output - four values

.margin-element {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 7px;
  margin-left: 15px;
}

Usage - null values

.margin-element {
  @include margin(5px null null 15px);
}

Output - null values

.margin-element {
  margin-top: 5px;
  margin-left: 15px;
}

Requires

Used by

Author

  • blackmirror1980

variables

[private] margin-modes

$margin-modes: array-concat((auto), $css-default-modes);

Description

Margin modes

Type

List

Used by

Author

  • blackmirror1980

Mixins - Media

mixins

media

@mixin media() { ... }

Description

Media query mixin

Parameters

None.

TODO's

  • refactor this mixin

  • write documentation

Author

  • blackmirror1980

Mixins - Outline

functions

is-outline-width

@function is-outline-width($ow) { ... }

Description

Checks if something is a supported outline width value

Parameters

NameDescriptionTypeDefault value
$ow

the outline-width value

String—

Returns

Boolean —

true if is outline-width value

Requires

Used by

Author

  • blackmirror1980

is-outline-style

@function is-outline-style($os) { ... }

Description

Checks if something is a supported outline style value

Parameters

NameDescriptionTypeDefault value
$os

the outline-style value

String—

Returns

Boolean —

true if is outline-style value

Requires

Used by

Author

  • blackmirror1980

is-outline-color

@function is-outline-color($oc) { ... }

Description

Checks if something is a supported outline color value

Parameters

NameDescriptionTypeDefault value
$oc

the outline-color value

String—

Returns

Boolean —

true if is outline-color value

Requires

Used by

Author

  • blackmirror1980

is-outline-offset

@function is-outline-offset($oo) { ... }

Description

Checks if something is a supported outline offset value

Parameters

NameDescriptionTypeDefault value
$oo

the outline-offset value

String—

Returns

Boolean —

true if is outline-offset value

Requires

Used by

Author

  • blackmirror1980

mixins

outline-width

@mixin outline-width($ow: medium, $important: false) { ... }

Description

Outline width mixin

Parameters

NameDescriptionTypeDefault value
$ow

the outline-width value

String or Size or Lengthmedium
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.outline-width-element {
  @include outline-width(2px);
}

Output

.outline-width-element {
  outline-width: 2px;
}

Requires

Used by

Links

Author

  • blackmirror1980

outline-style

@mixin outline-style($os: none, $important: false) { ... }

Description

Outline style mixin

Parameters

NameDescriptionTypeDefault value
$os

the outline-style value

Stringnone
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.outline-style-element {
  @include outline-style(dotted);
}

Output

.outline-style-element {
  outline-style: dotted;
}

Requires

Used by

Links

Author

  • blackmirror1980

outline-color

@mixin outline-color($oc: invert, $important: false) { ... }

Description

Outline color mixin

Parameters

NameDescriptionTypeDefault value
$oc

the outline-color value

String or Colorinvert
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.outline-color-element {
  @include outline-color(#ffa);
}

Output

.outline-color-element {
  outline-color: #ffa;
}

Requires

Used by

Links

Author

  • blackmirror1980

outline-offset

@mixin outline-offset($oo: 0, $important: false) { ... }

Description

Outline offset mixin

Parameters

NameDescriptionTypeDefault value
$oo

the outline-offset value

String or Size or Length0
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.outline-offset-element {
  @include outline-offset(2px);
}

Output

.outline-offset-element {
  outline-offset: 2px;
}

Requires

Used by

Links

Author

  • blackmirror1980

outline

@mixin outline($options, $options.size: medium, $options.style: none, $options.color: invert, $options.offset: null, $important: false) { ... }

Description

Outline mixin

Parameters

NameDescriptionTypeDefault value
$options

the outline options

String or Object or Map or Array or List—
$options.size

the outline-width value

String or Size or Lengthmedium
$options.style

the outline-style value

Stringnone
$options.color

the outline-color value

String or Colorinvert
$options.offset

the outline-offset value

String or Size or Lengthnull
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.outline-element {
  @include outline(2px solid #000 1px);
}

Output

.outline-element {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #000;
  outline-offset: 1px;
}

Requires

Used by

Author

  • blackmirror1980

outline-force

@mixin outline-force($options, $options.size: medium, $options.style: none, $options.color: invert, $options.offset: null, $important: false) { ... }

Description

Outline force mixin

Parameters

NameDescriptionTypeDefault value
$options

the outline options

String or Object or Map or Array or List—
$options.size

the outline-width value

String or Size or Lengthmedium
$options.style

the outline-style value

Stringnone
$options.color

the outline-color value

String or Colorinvert
$options.offset

the outline-offset value

String or Size or Lengthnull
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.outline-force-element {
  @include outline-force(none);
}

Output

.outline-force-element {
  outline-width: medium;
  outline-style: none;
  outline-color: invert;
}

.outline-force-element:active,
.outline-force-element:focus, {
  outline-width: medium;
  outline-style: none;
  outline-color: invert;
}

Requires

Author

  • blackmirror1980

variables

[private] outline-width-modes

$outline-width-modes: array-concat((medium, thin, thick), $css-default-modes);

Description

Outline width modes

Type

List

Author

  • blackmirror1980

[private] outline-style-modes

$outline-style-modes: array-concat((none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), $css-default-modes);

Description

Outline style modes

Type

List

Author

  • blackmirror1980

[private] outline-color-modes

$outline-color-modes: array-concat((invert), $css-default-modes);

Description

Outline color modes

Type

List

Author

  • blackmirror1980

Mixins - Overflow

functions

is-overflow

@function is-overflow($o) { ... }

Description

Checks if something is a supported overflow mode

Parameters

NameDescriptionTypeDefault value
$o

the overflow mode

String—

Returns

Boolean —

true if is overflow mode

Requires

Used by

Author

  • blackmirror1980

mixins

overflow

@mixin overflow($o, $important: false) { ... }

Description

Overflow mixin

Parameters

NameDescriptionTypeDefault value
$o

the overflow mode

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.overflow-element {
  @include overflow(hidden);
}

Output

.overflow-element {
  overflow-x: hidden;
  overflow-y: hidden;
}

Usage

.overflow-element {
  @include overflow(hidden scroll);
}

Output

.overflow-element {
  overflow-x: hidden;
  overflow-y: scroll;
}

Requires

Used by

Author

  • blackmirror1980

variables

[private] overflow-modes

$overflow-modes: array-concat((visible, hidden, scroll, overlay, unset, auto), $css-default-modes);

Description

Overflow modes

Type

List

Used by

Author

  • blackmirror1980

Mixins - Padding

functions

is-padding

@function is-padding($p) { ... }

Description

Checks if something is a padding value

Parameters

NameDescriptionTypeDefault value
$p

the padding value (e.g. initial or 20px)

String or Length—

Returns

Boolean —

true if is padding value

Requires

Used by

Author

  • blackmirror1980

mixins

padding-direction

@mixin padding-direction($p, $padding-direction-selector: padding, $important: false) { ... }

Description

Padding direction mixin

Parameters

NameDescriptionTypeDefault value
$p

the padding value (e.g. initial or 20px)

String or Length—
$padding-direction-selector

the padding direction (e.g. padding-top)

Stringpadding
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.padding-direction-element {
  @include padding-direction(5px);
}

Output

.padding-direction-element {
  padding: 5px;
}

Usage - padding-left

.padding-direction-element {
  @include padding-direction(5px, padding-left);
}

Output - padding-left

.padding-direction-element {
  padding-left: 5px;
}

Requires

Used by

Author

  • blackmirror1980

padding-top

@mixin padding-top($p, $important: false) { ... }

Description

Padding top mixin

Parameters

NameDescriptionTypeDefault value
$p

the padding value (e.g. initial or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.padding-top-element {
  @include padding-top(5px);
}

Output

.padding-top-element {
  padding-top: 5px;
}

Requires

Used by

See

Author

  • blackmirror1980

padding-right

@mixin padding-right($p, $important: false) { ... }

Description

Padding right mixin

Parameters

NameDescriptionTypeDefault value
$p

the padding value (e.g. initial or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.padding-right-element {
  @include padding-right(5px);
}

Output

.padding-right-element {
  padding-right: 5px;
}

Requires

Used by

See

Author

  • blackmirror1980

padding-bottom

@mixin padding-bottom($p, $important: false) { ... }

Description

Padding bottom mixin

Parameters

NameDescriptionTypeDefault value
$p

the padding value (e.g. initial or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.padding-bottom-element {
  @include padding-bottom(5px);
}

Output

.padding-bottom-element {
  padding-bottom: 5px;
}

Requires

Used by

See

Author

  • blackmirror1980

padding-left

@mixin padding-left($p, $important: false) { ... }

Description

Padding left mixin

Parameters

NameDescriptionTypeDefault value
$p

the padding value (e.g. initial or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.padding-left-element {
  @include padding-left(5px);
}

Output

.padding-left-element {
  padding-left: 5px;
}

Requires

Used by

See

Author

  • blackmirror1980

padding

@mixin padding($p, $important: false) { ... }

Description

Padding mixin

Parameters

NameDescriptionTypeDefault value
$p

the padding value (e.g. initial or 20px)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage - single value

.padding-element {
  @include padding(5px);
}

Output - single value

.padding-element {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

Usage - two values

.padding-element {
  @include padding(5px 10px);
}

Output - two values

.padding-element {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}

Usage - three values

.padding-element {
  @include padding(5px 10px 7px);
}

Output - three values

.padding-element {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 7px;
  padding-left: 10px;
}

Usage - four values

.padding-element {
  @include padding(5px 10px 7px 15px);
}

Output - four values

.padding-element {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 7px;
  padding-left: 15px;
}

Usage - null values

.padding-element {
  @include padding(5px null null 15px);
}

Output - null values

.padding-element {
  padding-top: 5px;
  padding-left: 15px;
}

Requires

Used by

Author

  • blackmirror1980

Mixins - Position

functions

is-position

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

Description

Checks if something is a position mode

Parameters

NameDescriptionTypeDefault value
$pm

the position mode

String—

Returns

Boolean —

true if is position mode

Requires

Used by

Author

  • blackmirror1980

is-position-point-value

@function is-position-point-value($ppv) { ... }

Description

Checks if something is a position point value

Parameters

NameDescriptionTypeDefault value
$ppv

the position point value

String or Length—

Returns

Boolean —

true if is position point value value

Requires

Used by

Author

  • blackmirror1980

is-position-point

@function is-position-point($pp) { ... }

Description

Checks if something is a position point

Parameters

NameDescriptionTypeDefault value
$pp

the position point

String—

Returns

Boolean —

true if is position point

Requires

Used by

Author

  • blackmirror1980

mixins

position-point

@mixin position-point($v, $p, $important: false) { ... }

Description

Position point mixin

Parameters

NameDescriptionTypeDefault value
$v

the point value (eg. 1px, 20%, auto, etc...)

String or Length—
$p

the point (top, right, bottom, left)

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.position-point-element {
  @include position-point(0, top);
}

Output

.position-point-element {
  top: 0;
}

Requires

Used by

Author

  • blackmirror1980

top

@mixin top($v, $important: false) { ... }

Description

Top mixin

Parameters

NameDescriptionTypeDefault value
$v

the point value (eg. 1px, 20%, auto, etc...)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.top-element {
  @include top(0);
}

Output

.top-element {
  top: 0;
}

Requires

Used by

See

Author

  • blackmirror1980

right

@mixin right($v, $important: false) { ... }

Description

Right mixin

Parameters

NameDescriptionTypeDefault value
$v

the point value (eg. 1px, 20%, auto, etc...)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.right-element {
  @include right(0);
}

Output

.right-element {
  right: 0;
}

Requires

Used by

See

Author

  • blackmirror1980

bottom

@mixin bottom($v, $important: false) { ... }

Description

Bottom mixin

Parameters

NameDescriptionTypeDefault value
$v

the point value (eg. 1px, 20%, auto, etc...)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.bottom-element {
  @include bottom(0);
}

Output

.bottom-element {
  bottom: 0;
}

Requires

Used by

See

Author

  • blackmirror1980

left

@mixin left($v, $important: false) { ... }

Description

Left mixin

Parameters

NameDescriptionTypeDefault value
$v

the point value (eg. 1px, 20%, auto, etc...)

String or Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.left-element {
  @include left(0);
}

Output

.left-element {
  left: 0;
}

Requires

Used by

See

Author

  • blackmirror1980

position

@mixin position($options, $options.position, $options.top, $options.right, $options.bottom, $options.left, $important: false) { ... }

Description

Position mixin

Parameters

NameDescriptionTypeDefault value
$options

the options

String—
$options.position

the position mode

String—
$options.top

the top

Length—
$options.right

the right

Length—
$options.bottom

the bottom

Length—
$options.left

the left

Length—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.position-element {
  @include position(absolute 0 0 0 0);
}

Output

.position-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Usage - sticky

.position-element {
  @include position(sticky 10px 2rem);
}

Output

.position-element {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  right: 2rem;
  bottom: 10px;
  left: 2rem;
}

Requires

Used by

Author

  • blackmirror1980

variables

[private] position-modes

$position-modes: array-concat((static, absolute, fixed, relative, sticky), $css-default-modes);

Description

Position modes

Type

List

Used by

Author

  • blackmirror1980

[private] position-point-modes

$position-point-modes: array-concat((auto), $css-default-modes);

Description

Position point modes

Type

List

Used by

Author

  • blackmirror1980

[private] position-points

$position-points: (top, right, bottom, left);

Description

Position points

Type

List

Used by

Author

  • blackmirror1980

Mixins - Text

functions

is-font-family

@function is-font-family($ff) { ... }

Description

Checks if something is a supported font-family value

Parameters

NameDescriptionTypeDefault value
$ff

the font-family value

String or Array or List—

Returns

Boolean —

true if is font-family value

Requires

Used by

Links

Author

  • blackmirror1980

is-text-indent

@function is-text-indent($ti) { ... }

Description

Checks if something is a supported text-indent value

Parameters

NameDescriptionTypeDefault value
$ti

the text-indent value

Percentage or String—

Returns

Boolean —

true if is text-indent value

Requires

Used by

Links

Author

  • blackmirror1980

is-text-shadow-mode

@function is-text-shadow-mode($tsm) { ... }

Description

Checks if something is text shadow mode

Parameters

NameDescriptionTypeDefault value
$tsm

the text-shadow mode

String—

Returns

Boolean —

true if is text-shadow mode

Requires

Used by

Author

  • blackmirror1980

is-direction

@function is-direction($d) { ... }

Description

Checks if something is a supported direction mode

Parameters

NameDescriptionTypeDefault value
$d

the direction mode

String—

Returns

Boolean —

true if is direction mode

Requires

Used by

Links

Author

  • blackmirror1980

is-font-weight

@function is-font-weight($fw) { ... }

Description

Checks if something is a supported font-weight value

Parameters

NameDescriptionTypeDefault value
$fw

the font-weight value

String or Integer—

Returns

Boolean —

true if is font-weight value

Requires

Used by

Links

Author

  • blackmirror1980

is-hyphens

@function is-hyphens($h) { ... }

Description

Checks if something is a supported hyphens mode

Parameters

NameDescriptionTypeDefault value
$h

the hyphens mode

String—

Returns

Boolean —

true if is hyphens mode

Requires

Used by

Links

Author

  • blackmirror1980

is-letter-spacing

@function is-letter-spacing($ls) { ... }

Description

Checks if something is a supported letter-spacing value

Parameters

NameDescriptionTypeDefault value
$ls

the letter-spacing value

Size or String—

Returns

Boolean —

true if is letter-spacing value

Requires

Used by

Links

Author

  • blackmirror1980

is-line-height

@function is-line-height($lh) { ... }

Description

Checks if something is a supported line-height value

Parameters

NameDescriptionTypeDefault value
$lh

the line-height value

Size or Percentage or Line-height-mode—

Returns

Boolean —

true if is line-height value

Requires

Used by

Links

Author

  • blackmirror1980

is-text-align

@function is-text-align($ta) { ... }

Description

Checks if something is a supported text-align value

Parameters

NameDescriptionTypeDefault value
$ta

the text-align value

String—

Returns

Boolean —

true if is text-align value

Requires

Used by

Links

Author

  • blackmirror1980

is-text-decoration-line

@function is-text-decoration-line($tdlm) { ... }

Description

Checks if something is a supported text-decoration-line mode

Parameters

NameDescriptionTypeDefault value
$tdlm

the text-decoration-line mode

Text-decoration-line-mode—

Returns

Boolean —

true if is text-decoration-line mode

Requires

Used by

Author

  • blackmirror1980

is-text-overflow

@function is-text-overflow($to) { ... }

Description

Checks if something is a supported text-overflow mode

Parameters

NameDescriptionTypeDefault value
$to

the text-overflow mode

String—

Returns

Boolean —

true if is text-overflow mode

Requires

Used by

Links

Author

  • blackmirror1980

is-text-size-adjust

@function is-text-size-adjust($tsa) { ... }

Description

Checks if something is a supported text-size-adjust value

Parameters

NameDescriptionTypeDefault value
$tsa

the text-size-adjust value

Percentage or String—

Returns

Boolean —

true if is text-size-adjust value

Requires

Used by

Links

Author

  • blackmirror1980

is-text-stroke-width

@function is-text-stroke-width($tsw) { ... }

Description

Checks if something is a supported text-stroke-width value

Parameters

NameDescriptionTypeDefault value
$tsw

the text-stroke-width value

Size or Text-stroke-width-mode—

Returns

Boolean —

true if is text-stroke-width value

Requires

Used by

Author

  • blackmirror1980

is-text-transform

@function is-text-transform($tt) { ... }

Description

Checks if something is a supported text-transform value

Parameters

NameDescriptionTypeDefault value
$tt

the text-transform value

String—

Returns

Boolean —

true if is text-transform value

Requires

Used by

Links

Author

  • blackmirror1980

is-user-select

@function is-user-select($us) { ... }

Description

Checks if something is a supported user-select mode

Parameters

NameDescriptionTypeDefault value
$us

the user-select mode

String—

Returns

Boolean —

true if is user-select mode

Requires

Used by

Links

Author

  • blackmirror1980

is-vertical-align

@function is-vertical-align($va) { ... }

Description

Checks if something is a supported vertical-align value

Parameters

NameDescriptionTypeDefault value
$va

the vertical-align value

String—

Returns

Boolean —

true if is vertical-align value

Requires

Used by

Links

Author

  • blackmirror1980

is-white-space

@function is-white-space($ws) { ... }

Description

Checks if something is a supported white-space mode

Parameters

NameDescriptionTypeDefault value
$ws

the white-space mode

String—

Returns

Boolean —

true if is white-space mode

Requires

Used by

Links

Author

  • blackmirror1980

is-word-break

@function is-word-break($wb) { ... }

Description

Checks if something is a supported word-break mode

Parameters

NameDescriptionTypeDefault value
$wb

the word-break mode

String—

Returns

Boolean —

true if is word-break mode

Requires

Used by

Links

Author

  • blackmirror1980

is-word-spacing

@function is-word-spacing($ws) { ... }

Description

Checks if something is a supported word-spacing value

Parameters

NameDescriptionTypeDefault value
$ws

the word-spacing value

Size or String—

Returns

Boolean —

true if is word-spacing value

Requires

Used by

Links

Author

  • blackmirror1980

is-font-size

@function is-font-size($fs) { ... }

Description

Checks if something is a supported font-size value

Parameters

NameDescriptionTypeDefault value
$fs

the font-size value

Size or Percentage or Font-size-mode—

Returns

Boolean —

true if is font-size value

Requires

Used by

Links

Author

  • blackmirror1980

is-font-style

@function is-font-style($fs) { ... }

Description

Checks if something is a supported font-style value

Parameters

NameDescriptionTypeDefault value
$fs

the font-style value

Font-style-mode—

Returns

Boolean —

true, if it's actually a font style value

Requires

Used by

Links

Author

  • blackmirror1980

is-word-wrap

@function is-word-wrap($ww) { ... }

Description

Checks if something is a supported word-wrap mode

Parameters

NameDescriptionTypeDefault value
$ww

the word-wrap mode

String—

Returns

Boolean —

true if is word-wrap mode

Requires

Used by

Links

Author

  • blackmirror1980

is-text-shadow

@function is-text-shadow($text-shadow) { ... }

Description

Checks if something is text shadow value

Parameters

NameDescriptionTypeDefault value
$text-shadow

the text-shadow value

Any—

Returns

Boolean —

true if is text-shadow value

Requires

Used by

Author

  • blackmirror1980

is-text-decoration-style

@function is-text-decoration-style($tdsm) { ... }

Description

Checks if something is a supported text-decoration-style mode

Parameters

NameDescriptionTypeDefault value
$tdsm

the text-decoration-style mode

Text-decoration-style-mode—

Returns

Boolean —

true if is text-decoration-style mode

Requires

Used by

Author

  • blackmirror1980

is-text-decoration-color

@function is-text-decoration-color($tdc) { ... }

Description

Checks if something is a supported text-decoration-color mode

Parameters

NameDescriptionTypeDefault value
$tdc

the text-decoration-color value

Text-decoration-color—

Returns

Boolean —

true if is text-decoration-color value

Requires

Used by

Author

  • blackmirror1980

is-text-decoration-mode

@function is-text-decoration-mode($tdm) { ... }

Description

Checks if something is a supported text-decoration mode

Parameters

NameDescriptionTypeDefault value
$tdm

the text-decoration mode

Text-decoration-mode—

Returns

Boolean —

true if is text-decoration mode

Requires

Used by

Author

  • blackmirror1980

is-text-shadows

@function is-text-shadows($text-shadows) { ... }

Description

Checks if a list is a text-shadow values list (e.g. 0 2px 0 #dcffa6, 0 2px 5px #000)

Parameters

NameDescriptionTypeDefault value
$text-shadows

the text-shadow values list

Array or List—

Returns

Boolean —

true if is text-shadow values list

Requires

Used by

Author

  • blackmirror1980

is-text-decoration-skip

@function is-text-decoration-skip($tds) { ... }

Description

Checks if something is a supported text-decoration-skip mode

Parameters

NameDescriptionTypeDefault value
$tds

the text-decoration-skip mode

Text-decoration-skip-mode—

Returns

Boolean —

true if is text-decoration-skip mode

Requires

Used by

Author

  • blackmirror1980

is-text-underline-position

@function is-text-underline-position($tup) { ... }

Description

Checks if something is a supported text-underline-position mode

Parameters

NameDescriptionTypeDefault value
$tup

the text-underline-position mode

Text-underline-position-mode—

Returns

Boolean —

true if is text-underline-position mode

Requires

Used by

Author

  • blackmirror1980

mixins

color

@mixin color($options, $color: inherit, $important: false) { ... }

Description

Color mixin
used to foreground color

Parameters

NameDescriptionTypeDefault value
$options

the box color options

Object or Map—
$color

the color

Colorinherit
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.color-element {
  @include box-color(#ffa);
}

Output

.color-element {
  color: #ffa;
}

Requires

Used by

Author

  • blackmirror1980

text-indent

@mixin text-indent($ti, $important: false) { ... }

Description

Text indent mixin

Parameters

NameDescriptionTypeDefault value
$ti

the text-indent value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-indent-element {
  @include text-indent(-9999px);
}

Output

.text-indent-element {
  text-indent: -9999px;
}

Requires

Author

  • blackmirror1980

direction

@mixin direction($d, $important: false) { ... }

Description

Direction mixin

Parameters

NameDescriptionTypeDefault value
$d

the direction value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.direction-element {
  @include direction(rtl);
}

Output

.direction-element {
  direction: rtl;
}

Requires

Author

  • blackmirror1980

font-weight

@mixin font-weight($fw, $important: false) { ... }

Description

Font weight mixin

Parameters

NameDescriptionTypeDefault value
$fw

the font-weight value

String or Integer—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.font-weight-element {
  @include font-weight(bold);
}

Output

.font-weight-element {
  font-weight: bold;
}

Requires

Used by

Author

  • blackmirror1980

letter-spacing

@mixin letter-spacing($ls, $important: false) { ... }

Description

Letter spacing mixin

Parameters

NameDescriptionTypeDefault value
$ls

the letter-spacing value

Size or String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.letter-spacing-element {
  @include letter-spacing(3px);
}

Output

.letter-spacing-element {
  letter-spacing: 3px;
}

Requires

Used by

Author

  • blackmirror1980

line-height

@mixin line-height($lh, $important: false) { ... }

Description

Line height mixin

Parameters

NameDescriptionTypeDefault value
$lh

the line-height value

Size or Percentage or Line-height-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.line-height-element {
  @include line-height(2.5rem);
}

Output

.line-height-element {
  line-height: 2.5rem;
}

Requires

Used by

Author

  • blackmirror1980

text-align

@mixin text-align($ta, $important: false) { ... }

Description

Text align mixin

Parameters

NameDescriptionTypeDefault value
$ta

the text-align value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-align-element {
  @include text-align(center);
}

Output

.text-align-element {
  text-align: center;
}

Requires

Used by

Author

  • blackmirror1980

text-transform

@mixin text-transform($tt, $important: false) { ... }

Description

Text transform mixin

Parameters

NameDescriptionTypeDefault value
$tt

the text-transform value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-transform-element {
  @include text-transform(uppercase);
}

Output

.text-transform-element {
  text-transform: uppercase;
}

Requires

Author

  • blackmirror1980

vertical-align

@mixin vertical-align($va, $important: false) { ... }

Description

Vertical align mixin

Parameters

NameDescriptionTypeDefault value
$va

the vertical-align value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.vertical-align-element {
  @include vertical-align(top);
}

Output

.vertical-align-element {
  vertical-align: top;
}

Requires

Used by

Author

  • blackmirror1980

white-space

@mixin white-space($ws, $important: false) { ... }

Description

White space mixin

Parameters

NameDescriptionTypeDefault value
$ws

the white-space value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.white-space-element {
  @include white-space(nowrap);
}

Output

.white-space-element {
  white-space: nowrap;
}

Requires

Used by

Author

  • blackmirror1980

word-break

@mixin word-break($wb, $important: false) { ... }

Description

Word break mixin

Parameters

NameDescriptionTypeDefault value
$wb

the word-break value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.word-break-element {
  @include word-break(break-all);
}

Output

.word-break-element {
  word-break: break-all;
}

Requires

Used by

Author

  • blackmirror1980

word-spacing

@mixin word-spacing($ws, $important: false) { ... }

Description

Word spacing mixin

Parameters

NameDescriptionTypeDefault value
$ws

the word-spacing value

Size or String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.word-spacing-element {
  @include word-spacing(1rem);
}

Output

.word-spacing-element {
  word-spacing: 1rem;
}

Requires

Author

  • blackmirror1980

font-size

@mixin font-size($fs, $important: false) { ... }

Description

Font size mixin

Parameters

NameDescriptionTypeDefault value
$fs

the font-size value

Size or Percentage or Font-size-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.font-size-element {
  @include font-size(1.8rem);
}

Output

.font-size-element {
  font-size: 1.8rem;
}

Requires

Used by

Author

  • blackmirror1980

font-style

@mixin font-style($fs, $important: false) { ... }

Description

Font size mixin

Parameters

NameDescriptionTypeDefault value
$fs

the font-style value

Font-style-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.font-style-element {
  @include font-style(italic);
}

Output

.font-style-element {
  font-style: italic;
}

Requires

Used by

Author

  • blackmirror1980

text-overflow

@mixin text-overflow($to, $important: false) { ... }

Description

Text overflow mixin

Parameters

NameDescriptionTypeDefault value
$to

the text-overflow value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-overflow-element {
  @include text-overflow(ellipsis);
}

Output

.text-overflow-element {
  -o-overflow: ellipsis;
  text-overflow: ellipsis;
}

Requires

Used by

Author

  • blackmirror1980

text-stroke-width

@mixin text-stroke-width($tsw, $important: false) { ... }

Description

Text stroke width mixin

Parameters

NameDescriptionTypeDefault value
$tsw

the text-stroke-width value

Size or Text-stroke-width-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-stroke-width-element {
  @include text-stroke-width(2rem);
}

Output

.text-stroke-width {
  -webkit-text-stroke-width: 2rem;
  text-stroke-width: 2rem;
}

Requires

Used by

Links

Author

  • blackmirror1980

text-decoration-line

@mixin text-decoration-line($tdlm, $important: false) { ... }

Description

Text decoration line mixin

Parameters

NameDescriptionTypeDefault value
$tdlm

the text-decoration-line value

Text-decoration-line-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-decoration-line-element {
  @include text-decoration-line(overline);
}

Output

.text-decoration-line-element {
  -webkit-text-decoration-line: overline;
  -moz-decoration-line: overline;
  text-decoration-line: overline;
}

Requires

Used by

Links

Author

  • blackmirror1980

font-family

@mixin font-family($ff, $important: false) { ... }

Description

Font family mixin

Parameters

NameDescriptionTypeDefault value
$ff

the font-family value

String or Array or List—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.font-family-element {
  @include font-family('Source Sans Pro');
}

Output

.font-family-element {
  font-family: 'Source Sans Pro';
}

Usage

.font-family-element {
  @include font-family('Source Sans Pro', Verdana, sans-serif);
}

Output

.font-family-element {
  font-family: 'Source Sans Pro', Verdana, sans-serif;
}

Requires

Used by

Author

  • blackmirror1980

hyphens

@mixin hyphens($h, $important: false) { ... }

Description

Hyphens mixin

Parameters

NameDescriptionTypeDefault value
$h

the hyphens value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.hyphens-element {
  @include hyphens(manual);
}

Output

.hyphens-element {
  -webkit-overflow: manual;
  -moz-overflow: manual;
  -ms-overflow: manual;
  -o-overflow: manual;
  hyphens: manual;
}

Requires

Used by

Author

  • blackmirror1980

user-select

@mixin user-select($us, $important: false) { ... }

Description

User select mixin

Parameters

NameDescriptionTypeDefault value
$us

the user-select value

String—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.user-select-element {
  @include user-select(none);
}

Output

.user-select-element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Requires

Author

  • blackmirror1980

word-wrap

@mixin word-wrap($ww, $force: false, $important: false) { ... }

Description

Word wrap mixin

Parameters

NameDescriptionTypeDefault value
$ww

the word-wrap value

String—
$force

if true, will do proper hacks to force word-wrap

Booleanfalse
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.word-wrap-element {
  @include word-wrap(break-word);
}

Output

.word-wrap-element {
  word-wrap: break-word;
}

Requires

Used by

Author

  • blackmirror1980

text-size-adjust

@mixin text-size-adjust($tsa, $prefixes: $prefixes-default, $important: false) { ... }

Description

Text size adjust mixin

Parameters

NameDescriptionTypeDefault value
$tsa

the text-size-adjust value

String—
$prefixes

if true, will render the important rule

Array or List$prefixes-default
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-size-adjust-element {
  @include text-size-adjust(67%);
}

Output

.text-size-adjust-element {
  -webkit-text-size-adjust: 67%;
  -moz-text-size-adjust: 67%;
  -ms-text-size-adjust: 67%;
  -o-text-size-adjust: 67%;
  text-size-adjust: 67%;
}

Requires

Author

  • blackmirror1980

text-stroke-color

@mixin text-stroke-color($tsc, $important: false) { ... }

Description

Text stroke color mixin

Parameters

NameDescriptionTypeDefault value
$tsc

the text-stroke-color value

Color—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-stroke-color-element {
  @include text-stroke-color(red);
}

Output

.text-stroke-color {
  -webkit-text-stroke-color: red;
  text-stroke-color: red;
}

Requires

Used by

Links

Author

  • blackmirror1980

word-wrap-force

@mixin word-wrap-force() { ... }

Description

Word Wrap Force mixin

Parameters

None.

Example

Usage - single line

.word-wrap-force-element {
  @include word-wrap-force;
}

Output - single line

.word-wrap-force-element {
  hyphens: auto;
  word-break: break-all;
  word-wrap: break-word;
}

Requires

Author

  • blackmirror1980

font

@mixin font($options, $options.size: 1rem, $options.height: 1rem, $options.family: null, $options.weight: normal, $options.style: normal, $options.color: null, $important: false) { ... }

Description

Font mixin

Parameters

NameDescriptionTypeDefault value
$options

the options

Object or Map—
$options.size

the font-size value

Size or Percentage or Font-size-mode1rem
$options.height

the line-height value

Size or Percentage or Line-height-mode1rem
$options.family

the font-family value

String or Array or Listnull
$options.weight

the font-weight value

String or Integernormal
$options.style

the font-style value

Font-style-modenormal
$options.color

the color value

Colornull
$important

if true, will render the important rule

Booleanfalse

Example

Usage

$font-family: OpenSans, Verdana, sans-serif;

.font-element {
  @include font(1.5rem 2.5rem $font-family bold italic white);
}

Output

.font-element {
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-family: OpenSans, Verdana, sans-serif;
  font-weight: bold;
  font-style: italic;
  color: white;
}

Requires

Used by

Author

  • blackmirror1980

text-decoration-style

@mixin text-decoration-style($tdsm, $important: false) { ... }

Description

Text decoration style mixin

Parameters

NameDescriptionTypeDefault value
$tdsm

the text-decoration-style value

Text-decoration-style-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-decoration-style-element {
  @include text-decoration-style(wavy);
}

Output

.text-decoration-style-element {
  -moz-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

Requires

Used by

Links

Author

  • blackmirror1980

text-stroke

@mixin text-stroke($options, $options.width: 1rem, $options.color: #fff, $important: false) { ... }

Description

Text stroke mixin, with fallbacks for older browsers

Parameters

NameDescriptionTypeDefault value
$options

the options

Object or Map—
$options.width

the text-stroke-width value

Size or Text-stroke-width-mode1rem
$options.color

the text-stroke-color value

Color#fff
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-stroke-element {
  @include text-stroke(2rem red);
}

Output

.text-stroke-element {
  // if text-stroke is supported
  -webkit-text-stroke: 2rem red;
  text-stroke: 2rem red;

  // if text-stroke is not supported
  -webkit-text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
  -moz-text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
  -ms-text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
  -o-text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
  text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
}

Requires

Author

  • blackmirror1980

text-decoration-color

@mixin text-decoration-color($tdc, $important: false) { ... }

Description

Text decoration color mixin

Parameters

NameDescriptionTypeDefault value
$tdc

the text-decoration-color value

Text-decoration-color-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-decoration-color-element {
  @include text-decoration-color(red);
}

Output

.text-decoration-color-element {
  -webkit-text-decoration-color: red;
  -moz-decoration-color: red;
  text-decoration-color: red;
}

Requires

Used by

Links

Author

  • blackmirror1980

text-decoration

@mixin text-decoration($options, $options.line: none, $options.style: solid, $options.color: transparent, $shorthand: false, $important: false) { ... }

Description

Text decoration mixin

Parameters

NameDescriptionTypeDefault value
$options

the text-decoration options

String or Object or Map—
$options.line

text-decoration-line

Text-decoration-linenone
$options.style

text-decoration-style

Text-decoration-stylesolid
$options.color

text-decoration-color

Text-decoration-colortransparent
$shorthand

if true, will render the shorthand form of text-decoration property

Booleanfalse
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-decoration-element {
  @include text-decoration(none);
}

Output

.text-decoration {
  text-decoration: none;
}

Requires

TODO's

  • Add support to multiple text-decoration-line options

Links

Author

  • blackmirror1980

content-align

@mixin content-align($options, $options.h: inherit, $options.v: inherit, $important: false) { ... }

Description

Content align mixin

Parameters

NameDescriptionTypeDefault value
$options

the content-align options value

Object or Map—
$options.h

the text-align value

Stringinherit
$options.v

the vertical-align value

Stringinherit
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.content-align-element {
  @include content-align(center middle);
}

Output

.content-align-element {
  text-align: center;
  vertical-align: middle;
}

Requires

Used by

Author

  • blackmirror1980

text-shadow

@mixin text-shadow($text-shadows...) { ... }

Description

Text shadow mixin

Parameters

NameDescriptionTypeDefault value
$text-shadows...

the text shadows list

Shadow—

Example

Usage

.text-shadow-element {
  @include text-shadow(0 2px 0 #dcffa6, 0 2px 5px #000);
}

Output

.text-shadow-element {
  -webkit-text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
  -moz-text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
  -ms-text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
  -o-text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
  text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
}

Requires

Used by

Author

  • blackmirror1980

ellipsis

@mixin ellipsis($multiline: false, $width: 100%, $font-size: $font-size-base, $line-height: $line-height-base, $lines-to-show: 3, $text-overflow: ellipsis) { ... }

Description

Ellipsis mixin
useful to ellipse text containers also in multiline mode

Parameters

NameDescriptionTypeDefault value
$multiline

the multiline mode

Booleanfalse
$width

the width to use

Size or Length or Percentage100%
$font-size

the font-size

Size or Length or Percentage$font-size-base
$line-height

the line-height

Size or Length or Percentage$line-height-base
$lines-to-show

the lines to show before ellipsis

Integer3
$text-overflow

the text to use for overflowing

Stringellipsis

Example

Usage - single line

.ellipsis-element {
  @include ellipsis;
}

Output - single line

.ellipsis-element {
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

Usage - multi line

.ellipsis-element {
  @include ellipsis(true);
}

Output - multi line

.ellipsis-element {
  display: block;
  display: -webkit-box;
  margin: 0 auto;
  font-size: 10px;
  line-height: 1.5;
  max-width: 100%;
  height: 45px;
  min-height: 45px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Requires

Author

  • blackmirror1980

text-decoration-skip

@mixin text-decoration-skip($tds, $important: false) { ... }

Description

Text decoration skip mixin

Parameters

NameDescriptionTypeDefault value
$tds

the text-decoration-skip value

Text-decoration-skip-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-decoration-skip-element {
  @include text-decoration-skip(objects);
}

Output

.text-decoration-skip-element {
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

Requires

Links

Author

  • blackmirror1980

content

@mixin content($content: '') { ... }

Description

Content mixin
useful to set content

Parameters

NameDescriptionTypeDefault value
$content—String''

Example

Usage - empty

.content-element {
  @include content;
}

Output - empty

.content-element {
  content: '';
}

Usage - with attr

.content-element {
  @include content(attr(title));
}

Output - with attr

.ellipsis-element {
  content: attr(title);
}

Author

  • blackmirror1980

text-underline-position

@mixin text-underline-position($tup, $important: false) { ... }

Description

Text underline position mixin

Parameters

NameDescriptionTypeDefault value
$tup

the text-underline-position value

Text-underline-position-mode—
$important

if true, will render the important rule

Booleanfalse

Example

Usage

.text-underline-position-element {
  @include text-underline-position(under);
}

Output

.text-underline-position-element {
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

Requires

Links

Author

  • blackmirror1980

variables

[private] direction-modes

$direction-modes: array-concat((ltr, rtl), $css-default-modes);

Description

Direction modes

Type

List

Used by

Author

  • blackmirror1980

[private] font-weight-modes

$font-weight-modes: array-concat((normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900), $css-default-modes);

Description

Font weight modes

Type

List

Used by

Author

  • blackmirror1980

[private] hyphens-modes

$hyphens-modes: array-concat((none, manual, auto, unset), $css-default-modes);

Description

Hyphens modes

Type

List

Used by

Author

  • blackmirror1980

[private] letter-spacing-modes

$letter-spacing-modes: array-concat((normal), $css-default-modes);

Description

Letter spacing modes

Type

List

Used by

Author

  • blackmirror1980

[private] line-height-modes

$line-height-modes: array-concat((normal), $css-default-modes);

Description

Line height modes

Type

List

Used by

Author

  • blackmirror1980

[private] text-align-modes

$text-align-modes: array-concat((left, center, right, justify), $css-default-modes);

Description

Text align modes

Type

List

Used by

Author

  • blackmirror1980

[private] text-overflow-modes

$text-overflow-modes: array-concat((clip, ellipsis), $css-default-modes);

Description

Text overflow modes

Type

List

Used by

Author

  • blackmirror1980

[private] text-shadow-modes

$text-shadow-modes: array-concat((none), $css-default-modes);

Description

Text shadow modes

Type

List

Used by

Author

  • blackmirror1980

[private] text-size-adjust-modes

$text-size-adjust-modes: array-concat((none, auto, unset), $css-default-modes);

Description

Text size adjust modes

Type

List

Used by

Author

  • blackmirror1980

[private] text-transform-modes

$text-transform-modes: array-concat((none, capitalize, uppercase, lowercase), $css-default-modes);

Description

Text transform modes

Type

List

Used by

Author

  • blackmirror1980

[private] user-select-modes

$user-select-modes: (auto, none, text, all);

Description

User select modes

Type

List

Used by

Author

  • blackmirror1980

[private] vertical-align-modes

$vertical-align-modes: array-concat((baseline, sub, super, top, text-top, middle, bottom, text-bottom), $css-default-modes);

Description

Vertical align modes

Type

List

Used by

Author

  • blackmirror1980

[private] white-space-modes

$white-space-modes: array-concat((normal, nowrap, pre, pre-line, pre-wrap), $css-default-modes);

Description

White space modes

Type

List

Used by

Author

  • blackmirror1980

[private] word-break-modes

$word-break-modes: array-concat((normal, break-all, keep-all), $css-default-modes);

Description

Word break modes

Type

List

Used by

Author

  • blackmirror1980

[private] word-spacing-modes

$word-spacing-modes: array-concat((normal), $css-default-modes);

Description

Word spacing modes

Type

List

Used by

Author

  • blackmirror1980

[private] font-size-modes

$font-size-modes: array-concat((medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger), $css-default-modes);

Description

Font size modes

Type

List

Requires

Used by

Author

  • blackmirror1980

[private] font-style-modes

$font-style-modes: array-concat((normal, italic, oblique), $css-default-modes);

Description

Font style modes

Type

List

Requires

Used by

Author

  • blackmirror1980

[private] text-decoration-line-modes

$text-decoration-line-modes: array-concat((none, underline, overline, line-through), $css-default-modes);

Description

Text decoration line modes

Type

List

Requires

Used by

Author

  • blackmirror1980

[private] text-stroke-width-modes

$text-stroke-width-modes: array-concat((thin, medium, thick), $css-default-modes);

Description

Text stroke width modes

Type

List

Requires

Used by

Author

  • blackmirror1980

[private] word-wrap-modes

$word-wrap-modes: array-concat((normal, break-word), $css-default-modes);

Description

Word wrap modes

Type

List

Used by

Author

  • blackmirror1980

[private] text-decoration-style-modes

$text-decoration-style-modes: array-concat((solid, double, dotted, dashed, wavy), $css-default-modes);

Description

Text decoration style modes

Type

List

Requires

Used by

Author

  • blackmirror1980

[private] text-decoration-modes

$text-decoration-modes: array-concat((none), $css-default-modes);

Description

Text decoration modes

Type

List

Requires

Used by

Author

  • blackmirror1980

[private] text-decoration-skip-modes

$text-decoration-skip-modes: array-concat((none, objects, spaces, ink, edges, box-decoration, unset), $css-default-modes);

Description

Text decoration skip modes

Type

List

Requires

Used by

Author

  • blackmirror1980

[private] text-underline-position-modes

$text-underline-position-modes: array-concat((auto, left, right, under, unset), $css-default-modes);

Description

Text underline position modes

Type

List

Requires

Used by

Author

  • blackmirror1980

Mixins - Transform

functions

get-transform-function-name

@function get-transform-function-name($t) { ... }

Description

Extracts transform function name from a transform value

Parameters

NameDescriptionTypeDefault value
$t

the transform value (e.g. scale(2) or rotate(10deg))

String—

Returns

String</code> or <code>Null —

the transform function name or null

Requires

Used by

Author

  • blackmirror1980

is-transform-function

@function is-transform-function($tf) { ... }

Description

Checks if something is a transform function value

Parameters

NameDescriptionTypeDefault value
$tf

the transform function value (e.g. scale(2) or rotate(10deg))

String—

Returns

Boolean —

true if is a transform function value

Requires

Used by

Author

  • blackmirror1980

is-transform

@function is-transform($t) { ... }

Description

Checks if something is a transform value

Parameters

NameDescriptionTypeDefault value
$t

the transform value (e.g. none or scale(2) or rotate(10deg))

String—

Returns

Boolean —

true if is a transform value

Requires

Used by

Author

  • blackmirror1980

is-transforms

@function is-transforms($ts) { ... }

Description

Checks if a space separated list is a transforms values list

Parameters

NameDescriptionTypeDefault value
$ts

the transforms values list (e.g. scale(2) rotate(-45deg))

String or Array or List—

Returns

Boolean —

true if is a transform values list

Requires

Used by

Author

  • blackmirror1980

is-transform-origin

@function is-transform-origin($to, $to-axis-modes) { ... }

Description

Checks if something is a transform-origin value

Parameters

NameDescriptionTypeDefault value
$to

the transform-origin value (e.g. auto or 20px) - Note: for the z-axis can be only a length (e.g. no percentage)

String or Size or Length—
$to-axis-modes

can be empty list or $transform-origin-x-axis-modes or $transform-origin-y-axis-modes

Array or List—

Returns

Boolean —

true if is a transform-origin value

Requires

Used by

Author

  • blackmirror1980

is-transform-style

@function is-transform-style($ts) { ... }

Description

Checks if something is a transform-style mode

Parameters

NameDescriptionTypeDefault value
$ts

the transform-style mode (e.g. preserve-3d or initial)

String—

Returns

Boolean —

true if is a transform-style mode

Requires

Used by

Links

Author

  • blackmirror1980

mixins

transform

@mixin transform($ts) { ... }

Description

Transform mixin

Parameters

NameDescriptionTypeDefault value
$ts

the transforms list (e.g. skew(10deg, 3deg) or scale(2.2) rotate(-90deg))

String or Array or List—

Example

Usage - single transform

.transform-element {
  @include transform(skew(10deg, 3deg));
}

Output - single transform

.transform-element {
  -webkit-transform: skew(10deg, 3deg);
  -moz-transform: skew(10deg, 3deg);
  -ms-transform: skew(10deg, 3deg);
  -o-transform: skew(10deg, 3deg);
  transform: skew(10deg, 3deg);
}

Usage - multiple transforms

.transform-element {
  @include transform(scale(2.2) rotate(-90deg));
}

Output - multiple transforms

.transform-element {
  -webkit-transform: scale(2.2) rotate(-90deg);
  -moz-transform: scale(2.2) rotate(-90deg);
  -ms-transform: scale(2.2) rotate(-90deg);
  -o-transform: scale(2.2) rotate(-90deg);
  transform: scale(2.2) rotate(-90deg);
}

Requires

Used by

Author

  • blackmirror1980

matrix

@mixin matrix($a, $b, $c, $d, $tx, $ty) { ... }

Description

Matrix transform mixin

Parameters

NameDescriptionTypeDefault value
$a

the a value for the linear transformation

Number—
$b

the b value for the linear transformation

Number—
$c

the c value for the linear transformation

Number—
$d

the d value for the linear transformation

Number—
$tx

the horizontal translation to apply

Number—
$ty

the vertical translation to apply

Number—

Example

Usage

.matrix-transform-element {
  @include matrix(1, 2, -1, 1, 80, 80);
}

Output

.matrix-transform-element {
  -webkit-transform: matrix(1, 2, -1, 1, 80, 80);
  -moz-transform: matrix(1, 2, -1, 1, 80, 80);
  -ms-transform: matrix(1, 2, -1, 1, 80, 80);
  -o-transform: matrix(1, 2, -1, 1, 80, 80);
  transform: matrix(1, 2, -1, 1, 80, 80);
}

Requires

See

Links

Author

  • blackmirror1980

matrix3d

@mixin matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4) { ... }

Description

Matrix transform mixin

Parameters

NameDescriptionTypeDefault value
$a1

the a1 value for the linear transformation

Number—
$b1

the b1 value for the linear transformation

Number—
$c1

the c1 value for the linear transformation

Number—
$d1

the d1 value for the linear transformation

Number—
$a2

the a2 value for the linear transformation

Number—
$b2

the b2 value for the linear transformation

Number—
$c2

the c2 value for the linear transformation

Number—
$d2

the d2 value for the linear transformation

Number—
$a3

the a3 value for the linear transformation

Number—
$b3

the b3 value for the linear transformation

Number—
$c3

the c3 value for the linear transformation

Number—
$d3

the d3 value for the linear transformation

Number—
$a4

the a4 value for the translation to apply

Number—
$b4

the b4 value for the translation to apply

Number—
$c4

the c4 value for the translation to apply

Number—
$d4

the d4 value for the linear transformation

Number—

Example

Usage

.matrix3d-transform-element {
  @include matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
}

Output

.matrix-transform-element {
  -webkit-transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
  -moz-transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
  -ms-transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
  -o-transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
  transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
}

Requires

See

Links

Author

  • blackmirror1980

perspective

@mixin perspective($p) { ... }

Description

Perspective transform mixin

Parameters

NameDescriptionTypeDefault value
$p

the perspective value (e.g. 0 or 100px)

Length or Size—

Example

Usage

.perspective-element {
  @include perspective(1000px);
}

Output

.perspective-element {
  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -o-transform: perspective(1000px);
  transform: perspective(1000px);
}

Requires

Links

Author

  • blackmirror1980

rotate

@mixin rotate($a) { ... }

Description

Rotate transform mixin
Note: - this is equivalent to rotateZ($a) or rotate3d(0, 0, 1, $a)

Parameters

NameDescriptionTypeDefault value
$a

the rotate angle (e.g. 30deg or -10rad)

Angle—

Example

Usage

.rotate-element {
  @include rotate(10deg);
}

Output

.rotate-element {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
}

Requires

Links

Author

  • blackmirror1980

rotate3d

@mixin rotate3d($x, $y, $z, $a) { ... }

Description

Rotate 3d transform mixin

Parameters

NameDescriptionTypeDefault value
$x

the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1 (e.g. .75)

Float—
$y

the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1 (e.g. .75)

Float—
$z

the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1 (e.g. .75)

Float—
$a

the rotate angle (e.g. 30deg or -10rad)

Angle—

Example

Usage

.rotate3d-element {
  @include rotate3d(.3, .5, .75, -10turn);
}

Output

.rotate3d-element {
  -webkit-transform: rotate3d(.3, .5, .75, -10turn);
  -moz-transform: rotate3d(.3, .5, .75, -10turn);
  -ms-transform: rotate3d(.3, .5, .75, -10turn);
  -o-transform: rotate3d(.3, .5, .75, -10turn);
  transform: rotate3d(.3, .5, .75, -10turn);
}

Requires

Links

Author

  • blackmirror1980

rotateX

@mixin rotateX($a) { ... }

Description

RotateX transform mixin
Note: - this is equivalent to rotate3d(1, 0, 0, $a)

Parameters

NameDescriptionTypeDefault value
$a

the rotateX angle (e.g. 30deg or -10rad)

Angle—

Example

Usage

.rotate-x-element {
  @include rotateX(10deg);
}

Output

.rotate-x-element {
  -webkit-transform: rotateX(10deg);
  -moz-transform: rotateX(10deg);
  -ms-transform: rotateX(10deg);
  -o-transform: rotateX(10deg);
  transform: rotateX(10deg);
}

Requires

Links

Author

  • blackmirror1980

rotateY

@mixin rotateY($a) { ... }

Description

RotateY transform mixin
Note: - this is equivalent to rotate3d(0, 1, 0, $a)

Parameters

NameDescriptionTypeDefault value
$a

the rotateY angle (e.g. 30deg or -10rad)

Angle—

Example

Usage

.rotate-y-element {
  @include rotateY(10deg);
}

Output

.rotate-y-element {
  -webkit-transform: rotateY(10deg);
  -moz-transform: rotateY(10deg);
  -ms-transform: rotateY(10deg);
  -o-transform: rotateY(10deg);
  transform: rotateY(10deg);
}

Requires

Links

Author

  • blackmirror1980

rotateZ

@mixin rotateZ($a) { ... }

Description

RotateZ transform mixin
Note: - this is equivalent to rotate($a) or rotate3d(0, 0, 1, $a)

Parameters

NameDescriptionTypeDefault value
$a

the rotateZ angle (e.g. 30deg or -10rad)

Angle—

Example

Usage

.rotate-z-element {
  @include rotateZ(10deg);
}

Output

.rotate-z-element {
  -webkit-transform: rotateZ(10deg);
  -moz-transform: rotateZ(10deg);
  -ms-transform: rotateZ(10deg);
  -o-transform: rotateZ(10deg);
  transform: rotateZ(10deg);
}

Requires

Links

Author

  • blackmirror1980

scale

@mixin scale($sx, $sy: $sx) { ... }

Description

Scale transform mixin
Note: - this is equivalent to scaleX($sx) scaleY($sy) or scale3d($sx, $sy, 1)

Parameters

NameDescriptionTypeDefault value
$sx

the abscissa of the scaling vector (e.g. -.1 or 3.2)

Float—
$sy

the ordinate of the scaling vector (e.g. -.1 or 3.2)

Float$sx

Example

Usage - single value

.scale-element {
  @include scale(3.2);
}

Output - single value

.scale-element {
  -webkit-transform: scale(3.2, 3.2);
  -moz-transform: scale(3.2, 3.2);
  -ms-transform: scale(3.2, 3.2);
  -o-transform: scale(3.2, 3.2);
  transform: scale(3.2, 3.2);
}

Usage - two values

.scale-element {
  @include scale(3.2, 2.5);
}

Output - two values

.scale-element {
  -webkit-transform: scale(3.2, 2.5);
  -moz-transform: scale(3.2, 2.5);
  -ms-transform: scale(3.2, 2.5);
  -o-transform: scale(3.2, 2.5);
  transform: scale(3.2, 2.5);
}

Requires

Links

Author

  • blackmirror1980

scale3d

@mixin scale3d($sx, $sy, $sz) { ... }

Description

Scale 3d transform mixin

Parameters

NameDescriptionTypeDefault value
$sx

the abscissa of the scaling vector (e.g. -.1 or 3.2)

Float—
$sy

the ordinate of the scaling vector (e.g. -.1 or 3.2)

Float—
$sz

the z-component of the scaling vector (e.g. -.1 or 3.2)

Float—

Example

Usage

.scale3d-element {
  @include scale3d(-1.4, 0.4, 0.7);
}

Output

.scale3d-element {
  -webkit-transform: scale3d(-1.4, 0.4, 0.7);
  -moz-transform: scale3d(-1.4, 0.4, 0.7);
  -ms-transform: scale3d(-1.4, 0.4, 0.7);
  -o-transform: scale3d(-1.4, 0.4, 0.7);
  transform: scale3d(-1.4, 0.4, 0.7);
}

Requires

Links

Author

  • blackmirror1980

scaleX

@mixin scaleX($sx) { ... }

Description

ScaleX transform mixin
Note: - this is equivalent to scale($sx, 1) or scale3d($sx, 1, 1)

Parameters

NameDescriptionTypeDefault value
$sx

the scaling factor to apply on the abscissa of each point of the element (e.g. -.1 or 3.2)

Float—

Example

Usage

.scale-x-element {
  @include scaleX(3.2);
}

Output

.scale-x-element {
  -webkit-transform: scaleX(3.2);
  -moz-transform: scaleX(3.2);
  -ms-transform: scaleX(3.2);
  -o-transform: scaleX(3.2);
  transform: scaleX(3.2);
}

Requires

Links

Author

  • blackmirror1980

scaleY

@mixin scaleY($sy) { ... }

Description

ScaleY transform mixin
Note: - this is equivalent to scale(1, $sy) or scale3d(1, $sy, 1)

Parameters

NameDescriptionTypeDefault value
$sy

the scaling factor to apply on the ordinate of each point of the element (e.g. -.1 or 3.2)

Float—

Example

Usage

.scale-y-element {
  @include scaleY(3.2);
}

Output

.scale-y-element {
  -webkit-transform: scaleY(3.2);
  -moz-transform: scaleY(3.2);
  -ms-transform: scaleY(3.2);
  -o-transform: scaleY(3.2);
  transform: scaleY(3.2);
}

Requires

Links

Author

  • blackmirror1980

scaleZ

@mixin scaleZ($sz) { ... }

Description

ScaleZ transform mixin
Note: - this is equivalent to scale3d(1, 1, $sz)

Parameters

NameDescriptionTypeDefault value
$sz

the scaling factor to apply on the z-coordinate of each point of the element (e.g. -.1 or 3.2)

Float—

Example

Usage

.scale-z-element {
  @include scaleZ(3.2);
}

Output

.scale-z-element {
  -webkit-transform: scaleZ(3.2);
  -moz-transform: scaleZ(3.2);
  -ms-transform: scaleZ(3.2);
  -o-transform: scaleZ(3.2);
  transform: scaleZ(3.2);
}

Requires

Links

Author

  • blackmirror1980

skew

@mixin skew($ax, $ay: 0deg) { ... }

Description

Skew transform mixin
Note: - this is equivalent to skewX($ax) (in single value usage) or skewX($ax) skewY($ay) (in two values usage)

Parameters

NameDescriptionTypeDefault value
$ax

the angle to use to distort the element along the abscissa (e.g. -1.2rad or 30deg)

Angle—
$ay

the angle to use to distort the element along the ordinate (e.g. -1.2rad or 30deg)

Angle0deg

Example

Usage - single value

.skew-element {
  @include skew(50deg);
}

Output - single value

.skew-element {
  -webkit-transform: skew(50deg, 0deg);
  -moz-transform: skew(50deg, 0deg);
  -ms-transform: skew(50deg, 0deg);
  -o-transform: skew(50deg, 0deg);
  transform: skew(50deg, 0deg);
}

Usage - two values

.skew-element {
  @include skew(15deg, -50rad);
}

Output - two values

.skew-element {
  -webkit-transform: skew(15deg, -50rad);
  -moz-transform: skew(15deg, -50rad);
  -ms-transform: skew(15deg, -50rad);
  -o-transform: skew(15deg, -50rad);
  transform: skew(15deg, -50rad);
}

Requires

Links

Author

  • blackmirror1980

skewX

@mixin skewX($ax) { ... }

Description

SkewX transform mixin
Note: - this is equivalent to skew($ax)

Parameters

NameDescriptionTypeDefault value
$ax

the angle to use to distort the element along the abscissa (e.g. -1.2rad or 30deg)

Angle—

Example

Usage

.skew-x-element {
  @include skewX(50deg);
}

Output

.skew-x-element {
  -webkit-transform: skewX(50deg);
  -moz-transform: skewX(50deg);
  -ms-transform: skewX(50deg);
  -o-transform: skewX(50deg);
  transform: skewX(50deg);
}

Requires

Links

Author

  • blackmirror1980

skewY

@mixin skewY($ay) { ... }

Description

SkewY transform mixin
Note: - this is equivalent to skew(0deg, $ay)

Parameters

NameDescriptionTypeDefault value
$ay

the angle to use to distort the element along the ordinate (e.g. -1.2rad or 30deg)

Angle—

Example

Usage

.skew-y-element {
  @include skewY(-10deg);
}

Output

.skew-y-element {
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg);
}

Requires

Links

Author

  • blackmirror1980

translate

@mixin translate($tx: 0, $ty: 0) { ... }

Description

Translate transform mixin
Note: - this is equivalent to translateX($tx) or translate3d($tx, 0, 0) (in single value usage) or translateX($tx) translateY($ty) or translate3d($tx, $ty, 0) (in two values usage)

Parameters

NameDescriptionTypeDefault value
$tx

the abscissa (x-coordinate) of the translating vector (e.g. 10px or 30rem)

Size or Length0
$ty

the ordinate (y-coordinate) of the translating vector (e.g. 10px or 30rem)

Size or Length0

Example

Usage - single value

.translate-element {
  @include translate(10px);
}

Output - single value

.translate-element {
  -webkit-transform: translate(10px);
  -moz-transform: translate(10px);
  -ms-transform: translate(10px);
  -o-transform: translate(10px);
  transform: translate(10px);
}

Usage - two values

.translate-element {
  @include translate(20px, 15rem);
}

Output - two values

.translate-element {
  -webkit-transform: translate(20px, 15rem);
  -moz-transform: translate(20px, 15rem);
  -ms-transform: translate(20px, 15rem);
  -o-transform: translate(20px, 15rem);
  transform: translate(20px, 15rem);
}

Requires

Links

Author

  • blackmirror1980

translate3d

@mixin translate3d($tx, $ty, $tz) { ... }

Description

Translate 3d transform mixin

Parameters

NameDescriptionTypeDefault value
$tx

the abscissa (x-coordinate) of the translating vector (e.g. 10px or 30rem or 20%)

Size or Length—
$ty

the ordinate (y-coordinate) of the translating vector (e.g. 10px or 30rem or 20%)

Size or Length—
$tz

the z component of the translating vector (e.g. 10px or 30rem) - Note: it can't be avalue

Size or Length—

Example

Usage

.translate3d-element {
  @include translate3d(30px, 20%, 10rem);
}

Output

.translate3d-element {
  -webkit-transform: translate3d(30px, 20%, 10rem);
  -moz-transform: translate3d(30px, 20%, 10rem);
  -ms-transform: translate3d(30px, 20%, 10rem);
  -o-transform: translate3d(30px, 20%, 10rem);
  transform: translate3d(30px, 20%, 10rem);
}

Requires

Links

Author

  • blackmirror1980

translateX

@mixin translateX($tx) { ... }

Description

TranslateX transform mixin
Note: - this is equivalent to translate($tx, 0) or translate3d($tx, 0, 0)

Parameters

NameDescriptionTypeDefault value
$tx

the abscissa (x-coordinate) of the translating vector (e.g. 10px or 30rem)

Size or Length—

Example

Usage

.translate-x-element {
  @include translateX(10px);
}

Output

.translate-x-element {
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px);
}

Requires

Links

Author

  • blackmirror1980

translateY

@mixin translateY($ty) { ... }

Description

TranslateY transform mixin
Note: - this is equivalent to translate(0, $ty) or translate3d(0, $ty, 0)

Parameters

NameDescriptionTypeDefault value
$ty

the ordinate (y-coordinate) of the translating vector (e.g. 10px or 30rem)

Size or Length—

Example

Usage

.translate-y-element {
  @include translateY(10px);
}

Output

.translate-y-element {
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
}

Requires

Links

Author

  • blackmirror1980

translateZ

@mixin translateZ($tz) { ... }

Description

TranslateZ transform mixin
Note: - this is equivalent to translate3d(0, 0, $tz)

Parameters

NameDescriptionTypeDefault value
$tz

the z component of the translating vector (e.g. 10px or 30rem) - Note: it can't be avalue

Size or Length—

Example

Usage

.translate-z-element {
  @include translateZ(10px);
}

Output

.translate-z-element {
  -webkit-transform: translateZ(10px);
  -moz-transform: translateZ(10px);
  -ms-transform: translateZ(10px);
  -o-transform: translateZ(10px);
  transform: translateZ(10px);
}

Requires

Links

Author

  • blackmirror1980

transform-origin

@mixin transform-origin($to, $to.x: 50%, $to.y: 50%, $to.z: 0) { ... }

Description

Transform origin mixin

Parameters

NameDescriptionTypeDefault value
$to

the transform origin options (e.g. 40% 20rem 0 or right bottom 0 or initial)

String or Array or List—
$to.x

the x-axis value for transform origin

Size or Length50%
$to.y

the y-axis value for transform origin

Size or Length50%
$to.z

the z-axis value for transform origin - Note: for the z-axis can be only a length (e.g. no percentage)

Size or Length0

Example

Usage

.transform-origin-element {
  @include transform-origin(25.5% 30px 0);
}

Output

.transform-origin-element {
  -webkit-transform-origin: 25.5% 30px 0;
  -moz-transform-origin: 25.5% 30px 0;
  -ms-transform-origin: 25.5% 30px 0;
  -o-transform-origin: 25.5% 30px 0;
  transform-origin: 25.5% 30px 0;
}

Usage - with css default value

.transform-origin-element {
  @include transform-origin(inherit);
}

Output - with css default value

.transform-origin-element {
  -webkit-transform-origin: inherit;
  -moz-transform-origin: inherit;
  -ms-transform-origin: inherit;
  -o-transform-origin: inherit;
  transform-origin: inherit;
}

Requires

Author

  • blackmirror1980

transform-style

@mixin transform-style($ts) { ... }

Description

Transform style mixin

Parameters

NameDescriptionTypeDefault value
$ts

the transform-style value (e.g. preserve-3d or initial)

String—

Example

Usage

.transform-style-element {
  @include transform-style(preserve-3d);
}

Output

.transform-style-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

Requires

Author

  • blackmirror1980

variables

[private] transform-functions-names

$transform-functions-names: (matrix, matrix3d, translate, translate3d, translateX, translateY, translateZ, scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotate3d, rotateX, rotateY, rotateZ, skew, skewX, skewY, perspective);

Description

Transform function names

Type

List

Used by

Author

  • blackmirror1980

[private] transform-modes

$transform-modes: array-concat((none), $css-default-modes);

Description

Transform modes

Type

List

Used by

Author

  • blackmirror1980

[private] transform-origin-x-axis-modes

$transform-origin-x-axis-modes: (left, right, center);

Description

Transform origin x axis modes

Type

List

Used by

Author

  • blackmirror1980

[private] transform-origin-y-axis-modes

$transform-origin-y-axis-modes: (top, center, bottom);

Description

Transform origin y axis modes

Type

List

Used by

Author

  • blackmirror1980

[private] transform-style-modes

$transform-style-modes: array-concat((flat, preserve-3d), $css-default-modes);

Description

Transform style modes

Type

List

Used by

Author

  • blackmirror1980

Mixins - Transition

functions

is-transition-time

@function is-transition-time($tt) { ... }

Description

Checks if something is a transition time value

Parameters

NameDescriptionTypeDefault value
$tt

the transition time value (e.g. initial or 20ms)

String or Time—

Returns

Boolean —

true if is a transform time value

Requires

Used by

Author

  • blackmirror1980

is-transition-property

@function is-transition-property($tp) { ... }

Description

Checks if something is a transition property value

Parameters

NameDescriptionTypeDefault value
$tp

the transform property value (e.g. none, all, transform or initial )

String—

Returns

Boolean —

true if is a transform property value

Requires

Used by

Author

  • blackmirror1980

get-transition-timing-function-name

@function get-transition-timing-function-name($t) { ... }

Description

Extracts transition function name from a transform-timing-function value

Parameters

NameDescriptionTypeDefault value
$t

the transform-timing-function value (e.g. cubic-bezier(0,0,1,1))

String—

Returns

String</code> or <code>Null —

the transform-timing-function name or null

Requires

Used by

Author

  • blackmirror1980

is-transition-timing-function

@function is-transition-timing-function($t) { ... }

Description

Checks if something is a transition timing function value

Parameters

NameDescriptionTypeDefault value
$t

the transition value (e.g. cubic-bezier(0,0,1,1))

String—

Returns

Boolean —

true if is a transform-timing-function value

Requires

Used by

Author

  • blackmirror1980

is-transition-timing-mode-or-function

@function is-transition-timing-mode-or-function($ttf) { ... }

Description

Checks if something is a transition-timing-function value

Parameters

NameDescriptionTypeDefault value
$ttf

the transition-timing-function value (e.g. cubic-bezier(0,0,1,1) or ease-in-out)

String—

Returns

Boolean —

true if is a transition-timing-function value

Requires

Used by

Author

  • blackmirror1980

is-transition

@function is-transition($transition) { ... }

Description

Checks if something is a transition value

Parameters

NameDescriptionTypeDefault value
$transition

the transition value (e.g. background .3s linear 0)

String—

Returns

Boolean —

true if is a transition value

Requires

Used by

Author

  • blackmirror1980

is-transitions

@function is-transitions($transitions) { ... }

Description

Checks if a comma separated list is a transition values list

Parameters

NameDescriptionTypeDefault value
$transitions

the transition values list (e.g. background .3s linear 0, top .2s ease-in-out 1s)

String or Array or List—

Returns

Boolean —

true if is a transition values list

Requires

Used by

Author

  • blackmirror1980

mixins

transition-delay

@mixin transition-delay($td) { ... }

Description

Transition delay mixin

Parameters

NameDescriptionTypeDefault value
$td

the transition delay value (e.g. initial or 10s)

String or Time—

Example

Usage

.transition-delay-element {
  @include transition-delay(1s);
}

Output

.transition-delay-element {
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

Requires

Links

Author

  • blackmirror1980

transition-duration

@mixin transition-duration($td) { ... }

Description

Transition duration mixin

Parameters

NameDescriptionTypeDefault value
$td

the transition duration value (e.g. initial or 10s)

String or Time—

Example

Usage

.transition-duration-element {
  @include transition-duration(1s);
}

Output

.transition-duration-element {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

Requires

Links

Author

  • blackmirror1980

transition-property

@mixin transition-property($tp) { ... }

Description

Transition property mixin

Parameters

NameDescriptionTypeDefault value
$tp

the transform property value (e.g. none or all or initial)

String—

Example

Usage

.transition-property-element {
  @include transition-property(background-color);
}

Output

.transition-property-element {
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -ms-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}

Requires

Links

Author

  • blackmirror1980

transition-timing-function

@mixin transition-timing-function($ttf) { ... }

Description

Transition timing function mixin

Parameters

NameDescriptionTypeDefault value
$ttf

the transition timing function value (e.g. cubic-bezier(0,0,1,1) or ease-in-out)

String—

Example

Usage

.transition-timing-function-element {
  @include transition-timing-function(linear);
}

Output

.transition-timing-function-element {
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
}

Requires

Links

Author

  • blackmirror1980

transition

@mixin transition($transitions) { ... }

Description

Transform mixin

Parameters

NameDescriptionTypeDefault value
$transitions

the transitions list (e.g. background .3s linear 0, top .2s ease-in-out 1s)

String or Array or List—

Example

Usage - single transition

.transition-element {
  @include transition(background .3s linear 0);
}

Output - single transition

.transition-element {
  -webkit-transition: background .3s linear 0;
  -moz-transition: background .3s linear 0;
  -ms-transition: background .3s linear 0;
  -o-transition: background .3s linear 0;
  transition: background .3s linear 0;
}

Usage - multiple transitions

.transition-element {
  @include transition(background .3s linear 0, top .2s ease-in-out 1s);
}

Output - multiple transitions

.transition-element {
  -webkit-transition: background .3s linear 0, top .2s ease-in-out 1s;
  -moz-transition: background .3s linear 0, top .2s ease-in-out 1s;
  -ms-transition: background .3s linear 0, top .2s ease-in-out 1s;
  -o-transition: background .3s linear 0, top .2s ease-in-out 1s;
  transition: background .3s linear 0, top .2s ease-in-out 1s;
}

Requires

Author

  • blackmirror1980

variables

[private] transition-property-modes

$transition-property-modes: array-concat((none, all), $animateable-properties, $css-default-modes);

Description

Transition property modes

Type

List

Used by

Author

  • blackmirror1980

[private] transition-timing-functions-names

$transition-timing-functions-names: (steps, cubic-bezier);

Description

Transition timing functions

Type

List

Used by

Author

  • blackmirror1980

[private] transition-timing-modes

$transition-timing-modes: array-concat((linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end), $css-default-modes);

Description

Transition timing modes

Type

List

Used by

Author

  • blackmirror1980

Mixins - Will Change

functions

is-will-change

@function is-will-change($wc) { ... }

Description

Checks if something is a will-change value

Parameters

NameDescriptionTypeDefault value
$wc

the will-change value (e.g. auto or left, top)

String or List—

Returns

Boolean —

true if is a will-change value

Requires

Used by

Author

  • blackmirror1980

mixins

will-change

@mixin will-change($wc) { ... }

Description

Will Change

Parameters

NameDescriptionTypeDefault value
$wc

the will-change value (e.g. auto or left, top)

String or Array or List—

Example

Usage

.will-change-element {
  @include will-change(scroll-position);
}

Output

.will-change-element {
  will-change: scroll-position;
}

Usage

.will-change-element {
  @include will-change(left, top);
}

Output

.will-change-element {
  will-change: left, top;
}

Requires

Author

  • blackmirror1980

variables

[private] will-change-modes

$will-change-modes: array-concat((auto, scroll-position, contents, transform, opacity, unset), $animateable-properties, $css-default-modes);

Description

Will Change modes

Type

List

Used by

Author

  • blackmirror1980

Types - Angle

functions

is-angle

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

Description

Checks if a value is an angle value

Parameters

NameDescriptionTypeDefault value
$a

the value to check

Number (with unit)—

Returns

Boolean —

true if is a corrent angle value

Example

Usage

.element {
  $a: 30deg;

  @if is-angle($a) {
    transform: rotate($a);
  }
}

Output

.element {
  transform: rotate(30deg);
}

Requires

Used by

Author

  • blackmirror1980

variables

[private] angle-units

$angle-units: (deg, rad, grad, turn);

Description

Angle units supported

Type

List

Used by

Author

  • blackmirror1980

Types - Array

functions

is-array

@function is-array($a) { ... }

Description

Checks if a value is an array/list

Parameters

NameDescriptionTypeDefault value
$a

the value to check

List or Array—

Returns

Boolean —

true if is an array value

Requires

Used by

Author

  • blackmirror1980

array-contains

@function array-contains($a, $i) { ... }

Description

Checks if an array/list contains specified item

Parameters

NameDescriptionTypeDefault value
$a

the array/list

List or Array—
$i

the item

Any—

Returns

Boolean —

true if is the array contains the value

Requires

Used by

Author

  • blackmirror1980

array-concat

@function array-concat($lists...) { ... }

Description

Concats two or more arrays/lists

Parameters

NameDescriptionTypeDefault value
$lists...

the arrays/lists

List or Array—

Returns

List</code> or <code>Array —

the concatenated array/list

Requires

Used by

Author

  • blackmirror1980

array-join

@function array-join($a, $sep: ',') { ... }

Description

Joins an array/list in a string with the specified separator

Parameters

NameDescriptionTypeDefault value
$a

the array/list

List or Array—
$sep

the sparator

String','

Returns

String —

the joined string

Author

  • blackmirror1980

Types - Boolean

functions

is-boolean

@function is-boolean($b) { ... }

Description

Checks if a value is a boolean value

Parameters

NameDescriptionTypeDefault value
$b

the value to check

Boolean—

Returns

Boolean —

true if is a boolean value

Requires

Author

  • blackmirror1980

Types - Color

functions

is-color

@function is-color($c) { ... }

Description

Checks if a value is a color value

Parameters

NameDescriptionTypeDefault value
$c

the value to check

Color—

Returns

Boolean —

true if is a color value

Requires

Used by

Author

  • blackmirror1980

is-css-color

@function is-css-color($c) { ... }

Description

Checks if a value is a css color value (including transparent, initial, inherit)

Parameters

NameDescriptionTypeDefault value
$c

the value to check

Color—

Returns

Boolean —

true if is a css color value

Requires

Used by

Author

  • blackmirror1980

variables

[private] color-modes

$color-modes: array-concat((transparent), $css-default-modes);

Description

Color modes supported

Type

List

Used by

Author

  • blackmirror1980

Types - Common

functions

is-css-default

@function is-css-default($cd) { ... }

Description

Checks if a value is a css default mode (initial, inherit)

Parameters

NameDescriptionTypeDefault value
$cd

the value to check

Any—

Returns

Boolean —

true if is a css default value

Requires

Used by

Author

  • blackmirror1980

is-calc-length

@function is-calc-length($cl) { ... }

Description

Checks if a value is a css calc length value

Parameters

NameDescriptionTypeDefault value
$cl

the value to check

Any—

Returns

Boolean —

true if is a calc length value

Requires

Used by

Author

  • blackmirror1980

get-calc-length-expression

@function get-calc-length-expression($cl) { ... }

Description

Returns the css expression included in a css calc length value

Parameters

NameDescriptionTypeDefault value
$cl

the value to check

Any—

Returns

Css-expression —

the fixed css calc expression

Requires

Author

  • blackmirror1980

is-length-mode

@function is-length-mode($lm) { ... }

Description

Checks if a value is a css length mode supported

Parameters

NameDescriptionTypeDefault value
$lm

the value to check

Any—

Returns

Boolean —

true if is a length mode

Requires

Used by

Author

  • blackmirror1980

is-relative-length

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

Description

Checks if a length value has a relative length unit (em, ex, ch, rem, vw, vh, vmin, vmax)

Parameters

NameDescriptionTypeDefault value
$l

the value to check

Any—

Returns

Boolean —

true if is a relative length

Requires

Used by

Author

  • blackmirror1980

is-absolute-length

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

Description

Checks if a length value has an absolute length unit (cm, mm, in, px, pt, pc)

Parameters

NameDescriptionTypeDefault value
$l

the value to check

Any—

Returns

Boolean —

true if is a absolute length

Requires

Used by

Author

  • blackmirror1980

is-length

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

Description

Checks if a value is a valid CSS length
Relative, Absolute, Percentage, Calc or Length Mode

Parameters

NameDescriptionTypeDefault value
$l

true if is a relative length

Any—

Returns

Boolean —

true if is a length

Requires

Used by

Author

  • blackmirror1980

is-size

@function is-size($s) { ... }

Description

Checks if a value is a CSS size.

Parameters

NameDescriptionTypeDefault value
$s—Any—

Returns

Boolean —

true if is a size

Requires

Used by

Author

  • blackmirror1980

strip-unit

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

Description

Strips the unit from a value.

Parameters

NameDescriptionTypeDefault value
$v—Number—

Returns

Number (unitless) —

the unitless value

Example

Usage

$dimension: strip-unit(10em);

Result

$dimension: 10;

Used by

Author

  • blackmirror1980

variables

[private] css-default-modes

$css-default-modes: (initial, inherit);

Description

CSS default modes supported (shared between all modes arrays/lists)

Type

List

Used by

Author

  • blackmirror1980

[private] length-modes

$length-modes: array-concat((auto), $css-default-modes);

Description

Length modes supported (auto and $css-default-modes)

Type

List

Used by

See

Author

  • blackmirror1980

[private] relative-length-units

$relative-length-units: (em, ex, ch, rem, vw, vh, vmin, vmax);

Description

Relative length units supported

Type

List

Used by

Author

  • blackmirror1980

[private] absolute-length-units

$absolute-length-units: (cm, mm, in, px, pt, pc);

Description

Absolute length units supported

Type

List

Used by

Author

  • blackmirror1980

[private] css-size-modes

$css-size-modes: array-concat((auto, fill, fill-available, available, fit-content, min-content, max-content), $css-default-modes);

Description

CSS size/length modes supported

Type

List

Used by

See

Author

  • blackmirror1980

Types - Frequency

functions

is-frequency

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

Description

Checks if a value has a supported frequency unit

Parameters

NameDescriptionTypeDefault value
$f

the value to check

Any—

Returns

Boolean —

true if is a frequency value

Requires

Author

  • blackmirror1980

variables

[private] frequency-units

$frequency-units: (Hz, kHz);

Description

Frequency units supported

Type

List

Used by

Author

  • blackmirror1980

Types - Function

functions

is-function

@function is-function($f) { ... }

Description

Checks if something is a function

Parameters

NameDescriptionTypeDefault value
$f

the value to check

Any—

Returns

Boolean —

true if is a function

Requires

Author

  • blackmirror1980

Types - Number

functions

is-number

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

Description

Checks if something is a number

Parameters

NameDescriptionTypeDefault value
$n

the value to check

Any—

Returns

Boolean —

true if is a number

Requires

Used by

Author

  • blackmirror1980

is-integer

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

Description

Checks if something is an integer number

Parameters

NameDescriptionTypeDefault value
$i

the value to check

Any—

Returns

Boolean —

true if is an integer number

Requires

Used by

Author

  • blackmirror1980

is-float

@function is-float($f) { ... }

Description

Checks if something is a floating number

Parameters

NameDescriptionTypeDefault value
$f

the value to check

Any—

Returns

Boolean —

true if is a float number

Requires

Author

  • blackmirror1980

unitstrip

@function unitstrip($n) { ... }

Description

Removes the unit of something

Parameters

NameDescriptionTypeDefault value
$n

the something ;-)

Number—

Returns

Number —

the something unitstripped ;-)

Requires

Used by

Author

  • blackmirror1980

is-number-between

@function is-number-between($n, $f, $t, $include-bounds: true) { ... }

Description

Checks if a number is between two numbers, with an include bounds options defaulted to true

Parameters

NameDescriptionTypeDefault value
$n

the value to check

Number—
$f

the from value

Number—
$t

the to value

Number—
$include-bounds

specifies to execute either >= & =< or > & <

Booleantrue

Returns

Boolean —

true if the number is inside the bounds

Requires

Used by

Author

  • blackmirror1980

is-percentage

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

Description

Checks if something is a percentage number

Parameters

NameDescriptionTypeDefault value
$p

the value to check

Any—

Returns

Boolean —

true if is percentage number

Requires

Used by

Author

  • blackmirror1980

is-percentage-number

@function is-percentage-number($pn) { ... }

Description

Checks if something is a percentage floating number (between 0 and 1)

Parameters

NameDescriptionTypeDefault value
$pn

the value to check

Any—

Returns

Boolean —

true if is percentage floating number

Requires

Used by

Author

  • blackmirror1980

to-number

@function to-number($value) { ... }

Description

Casts a string into a number

Parameters

NameDescriptionTypeDefault value
$value

Value to be parsed

String or Number—

Returns

Number

Requires

Author

  • blackmirror1980

to-length

@function to-length($value, $unit) { ... }

Description

Add $unit to $value

Parameters

NameDescriptionTypeDefault value
$value

Value to add unit to

Number—
$unit

String representation of the unit

String—

Returns

Number —

$value expressed in $unit

Used by

Author

  • blackmirror1980

Types - Object

functions

is-object

@function is-object($o) { ... }

Description

Checks if something is an object/map

Parameters

NameDescriptionTypeDefault value
$o

the value to check

Any—

Returns

Boolean —

true if is an object

Requires

Used by

Author

  • blackmirror1980

get

@function get($o, $p) { ... }

Description

Deep get function for objects

Parameters

NameDescriptionTypeDefault value
$o

the object to look in

Object or Map—
$p

the path to check for

String—

Returns

Any —

the value found at the path or null

Example

Usage

$o: (
  prop1: (
    subprop1: #333,
    subprop2: #444
  ),
  prop2: (
    subprop1: solid
  ),
  prop3: (),
)

Result

$p: get($o, 'prop1.subprop2'); // #444

Requires

Used by

Author

  • blackmirror1980

set

@function set($o, $p, $v) { ... }

Description

Deep set function for objects

Parameters

NameDescriptionTypeDefault value
$o

the object to modify in

Object or Map—
$p

the path to use

String—
$v

the value to use

Any—

Returns

Any —

the object with the new value set at the specified path

Example

Usage

$o: (
  prop1: (
    subprop1: #333,
    subprop2: #444
  ),
  prop2: (
    subprop1: solid
  ),
  prop3: (),
)

$p: set($o, 'prop2.subprop2', #555);

Result

$o: (
  prop1: (
    subprop1: #333,
    subprop2: #444
  ),
  prop2: (
    subprop1: solid
    subprop2: #555
  ),
  prop3: (),
)

Requires

Author

  • blackmirror1980

extend

@function extend($o, $objects) { ... }

Description

Deep extend/merge function for objects

Parameters

NameDescriptionTypeDefault value
$o

the object to modify in

Object or Map—
$objects

the objects to merge in

Object or Map—

Returns

Any —

the new extended object

Example

Usage

$o1: (
  prop1: (
    subprop1: #333,
    subprop2: #444
  ),
  prop2: (
    subprop1: solid
    subprop2: #555
  )
)

$o2: (
  prop1: (
    subprop3: #555,
  ),
  prop2: (
    subprop2: Verdana
  ),
)

$o3: (
  prop3: (
    subprop1: 1px
  ),
)

Result

$o: (
  prop1: (
    subprop1: #333,
    subprop2: #444,
    subprop3: #555,
  ),
  prop2: (
    subprop1: solid
    subprop2: Verdana
  ),
  prop3: (
    subprop1: 1px
  ),
)

Requires

Used by

Author

  • blackmirror1980

Types - String

functions

is-string

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

Description

Checks if a value is a string value.

Parameters

NameDescriptionTypeDefault value
$s

the value to check

String—

Returns

Boolean —

true if is a string

Requires

Used by

Author

  • blackmirror1980

to-string

@function to-string($a) { ... }

Description

Converts something to a string

Parameters

NameDescriptionTypeDefault value
$a

the value to convert

Any—

Returns

String —

the converted string

Used by

Author

  • blackmirror1980

string-length

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

Description

Returns the number of characters in a string.

Note: aliases the native str-length method

Parameters

NameDescriptionTypeDefault value
$s

the string to count

String—

Returns

Integer —

the string length

Used by

Links

Author

  • blackmirror1980

string-index

@function string-index($h, $n) { ... }

Description

Returns the position index of the first occurrence of string needle in string haystack

Note: aliases the native str-index method

Parameters

NameDescriptionTypeDefault value
$h

the haystack

String—
$n

the needle

String—

Returns

Integer —

the string index position of the needle

Used by

Links

Author

  • blackmirror1980

string-insert

@function string-insert($s, $i, $p) { ... }

Description

Inserts string $i in string $s at $p position

Note: aliases the native str-insert method

Parameters

NameDescriptionTypeDefault value
$s

the string to modify

String—
$i

the string to insert into

String—
$p

the position index to use for insertion

Number—

Returns

String —

the new string

Links

Author

  • blackmirror1980

string-slice

@function string-slice($s, $from: 1, $to: -1) { ... }

Description

Extracts a sub string from a string between from & to position indexes,
if to position index is not specified (null), will be between from & the end of the string

Note: aliases the native str-slice method

Parameters

NameDescriptionTypeDefault value
$s

the string

String—
$from

the from position index

String1
$to

the to position index

String-1

Returns

String —

the sub string needle

Used by

Links

Author

  • blackmirror1980

string-starts-with

@function string-starts-with($h, $n) { ... }

Description

Checks if a string starts with another string.

Parameters

NameDescriptionTypeDefault value
$h

the haystack

String—
$n

the needle

String—

Returns

Boolean —

true if the string starts with the needle

Requires

Used by

Author

  • blackmirror1980

string-contains

@function string-contains($h, $n) { ... }

Description

Checks if a string contains another string.

Parameters

NameDescriptionTypeDefault value
$h

the haystack

String—
$n

the needle

String—

Returns

Boolean —

true if the string contains the needle

Requires

Used by

Author

  • blackmirror1980

string-ends-with

@function string-ends-with($h, $n) { ... }

Description

Checks if a string ends with another string.

Parameters

NameDescriptionTypeDefault value
$h

the haystack

String—
$n

the needle

String—

Returns

Boolean —

true if the string ends with the needle

Requires

Used by

Author

  • blackmirror1980

string-split

@function string-split($s, $sep: '.') { ... }

Description

Splits a string in an array/list using the specified separator

Parameters

NameDescriptionTypeDefault value
$s

the string to split

String—
$sep

the separator

String'.'

Returns

List</code> or <code>Array —

the splitted array

Requires

Used by

Author

  • blackmirror1980

string-replace

@function string-replace($h, $n, $r: '') { ... }

Description

Replaces all the occurrencies of a string inside another string with the specified value

Parameters

NameDescriptionTypeDefault value
$h

the haystack

String—
$n

the needle

String—
$r

the string to use for replacement

String''

Returns

String —

the updated string

Requires

Used by

Author

  • blackmirror1980

Types - Time

functions

is-time

@function is-time($t) { ... }

Description

Checks if a value has a supported time unit

Parameters

NameDescriptionTypeDefault value
$t

the value to check

Any—

Returns

Boolean —

true if is a time value

Requires

Used by

Author

  • blackmirror1980

variables

[private] time-units

$time-units: (s, ms);

Description

Time units supported

Type

List

Used by

Author

  • blackmirror1980

Types - URL

functions

has-url-function

@function has-url-function($u) { ... }

Description

Checks if a string is an url function string

Parameters

NameDescriptionTypeDefault value
$u

the value to check

Any—

Returns

Boolean —

true if the url value has the url function inside

Requires

Used by

Author

  • blackmirror1980

is-url

@function is-url($u) { ... }

Description

Checks if a string is an url

Parameters

NameDescriptionTypeDefault value
$u

the value to check

Any—

Returns

Boolean —

true if is an url

Requires

Used by

Author

  • blackmirror1980

inspect-url

@function inspect-url($u) { ... }

Description

Adds the url function to an url string if is missing

Parameters

NameDescriptionTypeDefault value
$u

the value to check

Any—

Returns

Boolean —

the fixed url string value

Requires

Used by

Author

  • blackmirror1980