@media

mixins

breakpoint

Since v1.1.0
@mixin breakpoint($breakpoint, $direction: 'min', $breakpoint-map: $breakpoints, $max-overlap: null) { ... }

Description

Breakpoint Mixin using breakpoint map

Parameters

NameDescriptionTypeDefault value
$breakpoint

Breakpoint key from the breakpoints map

String—
$direction

Breakpoint direction min or max

String'min'
$breakpoint-map

All breakpoint vars in one map

Map$breakpoints
$max-overlap

How much should the max-width breakpoint overlap the min-width one?

Numbernull

Example

.my-selector {
  @include breakpoint(lg) {...}
}

Output CSS

@media (min-width: 78.75rem) {
   .my-selector {...}
}

Throws

  • ❌ ===> #{$direction} is not a valid option for direction. Please use: #{$valid-direction}

  • ❌ ===> #{$breakpoint} is not valid breakpoint. Please use: #{map.keys($breakpoint-map)}

Requires

Author

  • Felix Scholze

dark-mode-class

Since v1.10.0
@mixin dark-mode-class($parent: true, $class: 'dark') { ... }

Description

Use a predefined dark mode class to define dark mode styles.

Parameters

NameDescriptionTypeDefault value
$parent

If true, the dark mode class will be root

Booleantrue
$class

The dark mode class, could be any selector

String'dark'

Example

.button {
  @include dark-mode-class('body.dark-mode') {
    color: #fff;
  }
}

Output

body.dark-mode .button { color: #fff; }

Author

  • Felix Scholze

feature

Since v1.4.0
@mixin feature($feature) { ... }

Description

Includes a feature @media query

Parameters

NameDescriptionTypeDefault value
$feature

Feature Name

String—

Example

@include feature(
  'motion',
);

Throws

  • ❌ ===> #{$feature} is not a valide option for feature. Please use: #{$valid-feature}

Author

  • Felix Scholze

hover

Since v1.9.0
@mixin hover() { ... }

Description

Hover using @media hover:hover

Parameters

None.

Example

.my-selector {
  @include hover {...}
}

Output CSS

@media (hover: hover) {
   .my-selector:hover {...}
}

Author

  • Felix Scholze

basic

mixins

select-style

Since v1.0.0
@mixin select-style($bg-color, $color, $selector: *) { ... }

Description

Styles for selected elements

Parameters

NameDescriptionTypeDefault value
$bg-color

Background-color

Color—
$color

Text-color

Color—
$selector

Selector

String*

Throws

  • ❌ ===> #{$bg-color} is not a color

  • ❌ ===> #{$color} is not a color

Author

  • Felix Scholze

target-anchor-offset

Since v1.0.0
@mixin target-anchor-offset($offset) { ... }

Description

Adds an offset for the targeted link(s)

Parameters

NameDescriptionTypeDefault value
$offset

the offset in any value

Number—

Requires

Author

  • Felix Scholze

color

functions

hex-to-rgb-values

Since v1.5.0
@function hex-to-rgb-values($color) { ... }

Description

Convert HEX colors to R, G, B values

Parameters

NameDescriptionTypeDefault value
$color—Color—

Returns

String

Author

  • Felix Scholze

hex-to-rgb

Since v1.5.0
@function hex-to-rgb($color, $alpha) { ... }

Description

Convert HEX colors to RGB (space-separated values)

Parameters

NameDescriptionTypeDefault value
$color

HEX color

Color—
$alpha

Alpha

Number—

Returns

String

Author

  • Felix Scholze

generate-color-shades

Since v2.4.0
@function generate-color-shades($base-color, $num-shades: 5, $lighten-percent: 0.5, $darken-percent: 0.5, $color-key-name: "color", $color-key-separator: "-") { ... }

Description

Generate shades in light and dark from a base color. The base color is the starting point, light shades starting from 100, dark shades following when the light shades are finished.

Parameters

NameDescriptionTypeDefault value
$base-color

Base color

Color—
$num-shades

Number of shades to generate

Number5
$lighten-percent

Percent (in decimal places from 0 to 1) to lighten each shade

Number0.5
$darken-percent

Percent (in decimal places from 0 to 1) to darken each shade

Number0.5
$color-key-name

Key name for the base color

String"color"
$color-key-separator

Key separator for the base color

String"-"

Returns

Map

Example

@debug generate-color-shades(#d33030, 5, 0.5, 0.5, "red");

Output CSS

("red-500": #d74545, "red-400": #dc5a5a, "red-300": #e06f6f, "red-200": #e58484, "red-100": #e99999, "red": #d33030, "red-600": #c12929, "red-700": #ac2424, "red-800": #972020, "red-900": #811c1c, "red-1000": #6c1717)

Author

  • Felix Scholze

generate-mixed-colors

Since v2.5.0
@function generate-mixed-colors($color1, $color2, $color3, $steps: 20, $color2-peak: 11) { ... }

Description

Generate a map of colors that are mixed between three colors with a peak point for color2.

Parameters

NameDescriptionTypeDefault value
$color1

The first color.

Color—
$color2

The second color.

Color—
$color3

The third color.

Color—
$steps

The number of steps to generate.

Number20
$color2-peak

The peak point for color2.

Number11

Returns

Map —

The map of colors.

Example

@debug generate-mixed-colors(green, yellow, red, 7, 4);

Output CSS

(1: green, 2: #80c000, 3: #bfdf00, 4: yellow, 5: #ffaa00, 6: #ff5500, 7: red)

Requires

Author

converter

functions

px-to-rem

Since v1.6.0
@function px-to-rem($px, $base: 16) { ... }

Description

Convert pixel value to rem value.

Parameters

NameDescriptionTypeDefault value
$px—Number—
$base—Number16

Example

@debug px-to-rem(10);
//=> 0.625rem

Throws

  • ❌ ===> Pixel: #{$px} has a unit

  • ❌ ===> Base Pixel: #{$base} has a unit

Used by

Author

  • Felix Scholze

element

mixins

line-on-sides

Since v1.0.0
@mixin line-on-sides($space-between-lines: 1.5rem, $line-color: #000, $line-width: 2px) { ... }

Description

Adds two lines between an element. There is an example https://css-tricks.com/line-on-sides-headers/

Parameters

NameDescriptionTypeDefault value
$space-between-lines—Number1.5rem
$line-color—Color#000
$line-width—Number2px

Throws

  • ❌ ===> #{$line-color} is not a color.

  • ❌ ===> #{$space-between-lines} is not a number.

  • ❌ ===> #{$line-width} is not a number.

Author

  • Felix Scholze

overlay

Since v1.0.0
@mixin overlay($overlay-type, $overlay-size, $parent-element, $overlay-element, $overlay-bg-color, $valide-type: (hover,static), $valide-size: (full, free)) { ... }

Description

Adds an overlay

Parameters

NameDescriptionTypeDefault value
$overlay-type—String—
$overlay-size—String—
$parent-element—String—
$overlay-element—String—
$overlay-bg-color—Color—
$valide-type—String(hover,static)
$valide-size—String(full, free)

Throws

  • ❌ ===> #{$overlay-size} is not a valide option for overlay-size. Please use: #{$valide-size}

  • ❌ ===> #{$overlay-type} is not a valide option for overlay-type. Please use: #{$valide-type}

Author

  • Felix Scholze

list-style-image

Since v1.0.0
@mixin list-style-image($path-and-color-name: '', $data-type: 'file', $bullet-size: 1rem, $spacing-multiplicator: 1.5, $list: ul, $list-item: li) { ... }

Description

Custom bullets for lists with different image types (as file or inline svg)

Parameters

NameDescriptionTypeDefault value
$path-and-color-name

Path to image file, color name

List''
$data-type

Choose between image file or svg inline data

String'file'
$bullet-size

Defines the bullet size and distance to the text

Number1rem
$spacing-multiplicator

Defines the spacing between bullet and text ($bullet-size * $spacing-multiplicator)

Number1.5
$list

Class of the unordered list

Stringul
$list-item

Class of the list item

Stringli

Example

Image as file
$icons: '#{$path-to-img}/icons/ok-sign-b.svg'blue,
        '#{$path-to-img}/icons/ok-sign.svg'white;
@include list-style-image($icons, 'file', 1.2rem, 1.7, '.icon-list');

Image as inline svg
$list-icon-color-primary: $primary;
$list-icon-primary: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><path d='M1631.23 1749.44l-6.26-7.15 2.76-2.87 3.67 4.3 10.3-9.01 2.79 2.79zM1634 1726a15 15 0 1015 15 14.993 14.993 0 00-15-15' transform='translate(-1619 -1726)' fill='#{$list-icon-color-primary}' fill-rule='evenodd'/></svg>");
$list-icons: $list-icon-primary blue, $list-icon-primary white;
@include list-style-image($list-icons, 'data', 1.2rem, 1.7, '.icon-list');

Throws

  • ❌ ===> #{$data-type} is not a valide option for data-type. Please use: #{$valide-type}

  • ❌ ===> #{$spacing-multiplier} is not a number.

Requires

TODO's

  • build a version for icon fonts

Author

  • Felix Scholze

list

functions

first-of-list

Since v1.3.0
@function first-of-list($list) { ... }

Description

Get the first $list element

Parameters

NameDescriptionTypeDefault value
$list—List—

Returns

Any type

Example

$my-list(1, 2, 3, 4, 5)
@debug first-of-list($my-list);
//=> 1

Throws

  • ❌ ===> #{$list} is not a list

Author

  • Felix Scholze

last-of-list

Since v1.3.0
@function last-of-list($list) { ... }

Description

Get the last $list element

Parameters

NameDescriptionTypeDefault value
$list—List—

Returns

Any type

Example

$my-list(1, 2, 3, 4, 5)
@debug last-of-list($my-list);
//=> 5

Throws

  • ❌ ===> #{$list} is not a list

Author

  • Felix Scholze

map

functions

map-collect

Since v1.2.0
@function map-collect($maps...) { ... }

Description

Map collect function Since the builtin map-merge function in Sass only take 2 arguments, it can only merge 2 maps at a time. The map-collect function below allows you to combine multiple maps together in a cleaner way.

Parameters

NameDescriptionTypeDefault value
$maps...—Map—

Returns

Map —

Merges maps to one map

Example

map-collect($map-1, $map-2, $map-3);

Author

  • bigglesrocks

number

functions

strip-unit

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

Description

Strip the unit from a number.

Parameters

NameDescriptionTypeDefault value
$number—Number—

Returns

Number

Example

@debug strip-unit(3rem);
//=> 3

Throws

  • ❌ ===> #{$number} is not a number

Requires

number-invert

Since v1.3.0
@function number-invert($number) { ... }

Description

Invert a number.

Parameters

NameDescriptionTypeDefault value
$number—Number—

Returns

Number

Example

@debug number-invert(7);
//=> -7

Throws

  • ❌ ===> #{$number} is not a number

Requires

Used by

Author

  • Felix Scholze

random-num

Since v1.6.0
@function random-num($min, $max) { ... }

Description

Generate a random number between min and max.

Parameters

NameDescriptionTypeDefault value
$min—Number—
$max—Number—

Returns

Number

Example

@debug random-num(3, 45);
//=> random number between 3 and 45

Throws

  • ❌ ===> $min: #{$min} is not a number

  • ❌ ===> $max: #{$max} is not a number

Requires

Author

  • Felix Scholze

round

Since v2.3.0
@function round($number, $decimals: 0) { ... }

Description

Round a number to a specific number of decimal places.

Parameters

NameDescriptionTypeDefault value
$number—Number—
$decimals—Number0

Example

.test-round {
  padding: fn.round(1.23456789, 2) + px;
}

//=>
.test-round {
  padding: 1.23px;
}

Used by

Author

  • Brecht De Ruyte

string

functions

str-starts-with

Since v1.3.0
@function str-starts-with($string, $substring) { ... }

Description

Check if $string starts with the given $substring.

Parameters

NameDescriptionTypeDefault value
$string

String to check

String—
$substring

Substring to search for at the start of $string

String—

Returns

Boolean

Example

@debug str-starts-with('hello world', 'hello');
//=> true

Throws

  • ❌ ===> #{$string} is not a string

  • ❌ ===> #{$substring} is not a string

Author

  • Felix Scholze

str-ends-with

Since v1.3.0
@function str-ends-with($string, $substring) { ... }

Description

Check if $string ends with the given $substring.

Parameters

NameDescriptionTypeDefault value
$string

String to check

String—
$substring

Substring to search for the end of $string

String—

Returns

Boolean

Example

@debug str-ends-with('hello world', 'world');

Throws

  • ❌ ===> #{$string} is not a string

  • ❌ ===> #{$substring} is not a string

Author

  • Felix Scholze

str-contains

Since v1.3.0
@function str-contains($string, $substring) { ... }

Description

Check if $string contains the given $substring.

Parameters

NameDescriptionTypeDefault value
$string

String to check

String—
$substring

Substring to search for in $string

String—

Returns

Boolean

Example

@debug str-contains('i love SCSS', 'SCSS');
//=> true

Throws

  • ❌ ===> #{$string} is not a string

  • ❌ ===> #{$substring} is not a string

Used by

Author

  • Felix Scholze

str-replace

Since v1.0.0
@function str-replace($string, $search, $replace) { ... }

Description

Replace $search with $replace in $string Used on our SVG icon backgrounds for custom forms.

Parameters

NameDescriptionTypeDefault value
$string

Initial string

String—
$search

Substring to replace

String—
$replace

('') - New value

String—

Returns

String —

Updated string

Example

$string: 'I hate SCSS!';
@include str-replace($string, 'hate', 'love');
//=> I love SCSS!

Throws

  • ❌ ===> #{$string} is not a string

  • ❌ ===> #{$search} is not a string

Used by

Author

  • Hugo Giraudel

escape-svg

Since v1.0.0
@function escape-svg($string) { ... }

Description

Requires the use of quotes around data URIs.

Parameters

NameDescriptionTypeDefault value
$string

SVG code

String—

Returns

String —

SCSS compiled output after URL-encoding

Example

$icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");

background-image: escape-svg($icon);

Throws

  • ❌ ===> #{$string} is not a string

Requires

Used by

Links

Author

  • Kevin Weber

type-checking

functions

is-number

Since v1.0.0
@function is-number($value) { ... }

Description

Check if its a number value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Used by

Links

Author

  • Hugo Giraudel

is-time

Since v1.0.0
@function is-time($value) { ... }

Description

Check if its a time value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Used by

Links

Author

  • Hugo Giraudel

is-duration

Since v1.0.0
@function is-duration($value) { ... }

Description

Check if its a duration value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Links

Author

  • Hugo Giraudel

is-angle

Since v1.0.0
@function is-angle($value) { ... }

Description

Check if its a angle value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Links

Author

  • Hugo Giraudel

is-frequency

Since v1.0.0
@function is-frequency($value) { ... }

Description

Check if its a frequency value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Links

Author

  • Hugo Giraudel

is-integer

Since v1.0.0
@function is-integer($value) { ... }

Description

Check if its a integer value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Used by

Links

Author

  • Hugo Giraudel

is-relative-length

Since v1.0.0
@function is-relative-length($value) { ... }

Description

Check if its a relative-length value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Used by

Links

Author

  • Hugo Giraudel

is-absolute-length

Since v1.0.0
@function is-absolute-length($value) { ... }

Description

Check if its a absolute-length value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Used by

Links

Author

  • Hugo Giraudel

is-percentage

Since v1.0.0
@function is-percentage($value) { ... }

Description

Check if its a percentage value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Used by

Links

Author

  • Hugo Giraudel

is-length

Since v1.0.0
@function is-length($value) { ... }

Description

Check if its a length value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Used by

Links

Author

  • Hugo Giraudel

is-resolution

Since v1.0.0
@function is-resolution($value) { ... }

Description

Check if its a resolution value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Links

Author

  • Hugo Giraudel

is-position

Since v1.0.0
@function is-position($value) { ... }

Description

Check if its a position value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Requires

Links

Author

  • Hugo Giraudel

is-color

Since v2.5.0
@function is-color($value) { ... }

Description

Check if its a color value

Parameters

NameDescriptionTypeDefault value
$value

Value to check

Void—

Used by

Author

typo

mixins

font-smoothing

Since v1.0.0
@mixin font-smoothing() { ... }

Description

Font Smoothing

Parameters

None.

Links

Author

  • Felix Scholze

font-face-old

Since v1.0.0
Deprecated!

font-face-old is deprecated!.

@mixin font-face-old($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) { ... }

Description

Adds fonts with the original @font-face rule Attention! When you use Laravel Mix your fonts path begins at the mix.config file location

Parameters

NameDescriptionTypeDefault value
$name

Font-Name

String—
$path

Path to font

String—
$weight

Font-Weight

Numbernull
$style

Font-Style

Stringnull
$exts

Font-Formats to add

Listeot woff2 woff ttf svg

Example

@include font-face(
  'Open Sans',
  '#{$path-to-fonts}/opensans/Light/OpenSans-Light',
  300,
  normal,
  woff2 woff
);

Requires

Links

Author

  • Jonathan Neal extended by Felix Scholze

fluid-typo

Deprecated!

fluid-typo is deprecated!.

@mixin fluid-typo($font-unit: rem, $min-font-size: 14, $max-font-size: 20, $min-screen-size: 400, $max-screen-size: 980) { ... }

Description

Responsive And Fluid Typography With vh And vw Units

Parameters

NameDescriptionTypeDefault value
$font-unit—Numberrem
$min-font-size—Number14
$max-font-size—Number20
$min-screen-size—Number400
$max-screen-size—Number980

Throws

  • fluid-typo is deprecated.

Links

Author

  • Michael Riethmuller

icon-font

Since v1.0.0
@mixin icon-font($class, $icon-code, $font-family) { ... }

Description

Adds font-icons using a pseudo element

Parameters

NameDescriptionTypeDefault value
$class—String—
$icon-code—String—
$font-family—String—

Author

  • Felix Scholze

font-face

Since v1.4.0
@mixin font-face($name, $path, $weight: null, $version: null, $unicode-range: '', $style: null, $exts: woff2 woff, $display: swap) { ... }

Description

Adds fonts via @font-face

Parameters

NameDescriptionTypeDefault value
$name

Font-Name

String—
$path

Path to font

String—
$weight

Font-Weight

Numbernull
$version

Font Version

Stringnull
$unicode-range

Unicode Range

String''
$style

Font-Style

Stringnull
$exts

Font-Formats to add

Listwoff2 woff
$display

Display

Stringswap

Example

@include font-face(
  'Open Sans',
  '#{$path-to-fonts}/opensans/Light/OpenSans-Light',
  400,
  1.0,
  '',
  normal,
  woff2 woff,
);

Author

  • Felix Scholze

functions

fluid

Since v2.3.0
@function fluid($min-size, $max-size, $min-breakpoint: 320, $max-breakpoint: 960, $unit: vw) { ... }

Description

Calculate fluid typography with clamp.

Parameters

NameDescriptionTypeDefault value
$min-size—Number—
$max-size—Number—
$min-breakpoint—Number320
$max-breakpoint—Number960
$unit—Numbervw

Example

.test-fluid {
  font-size: fn.fluid(16, 31);
}

//=>
.test-fluid {
  font-size: clamp(1rem, 2.34vw + 0.53rem, 1.94rem);
}

Requires

Author

  • Brecht De Ruyte

General

variables

valid-direction

$valid-direction: ('min', 'max');

Description

Error handling

Used by

get-breakpoints

$get-breakpoints: map.get($breakpoint-map, $breakpoint);

Description

Search and return the key from the breakpoints map

Used by