main

functions

fs-breakpoint

@function fs-breakpoint($keys...) { ... }
View source

Description

Helper to get named breakpoint value from $fs-breakpoints map. Defaults to using 'base' as key if a single argument is passed.

Parameters

NameDescriptionTypeDefault value
$keys

key/value

Arglist—

Returns

Number —

Breakpoint width

Throws

  • πŸ”΄ $fs-breakpoints map does not exist

  • πŸ”΄ $fs-breakpoints map does not contain any items

  • πŸ”΄ β€œ#{$keys}” breakpoint not found

Requires

fs-auto-contrast

@function fs-auto-contrast($base, $colors, $ratio: 4.5, $tolerance: 0) { ... }
View source

Description

Pick first color in map with passing color contrast ratio

Parameters

NameDescriptionTypeDefault value
$base

Background color

Color—
$colors

List of text colors ordered by preference

Map—
$ratio

Target contrast ratio

Number4.5
$tolerance

Allowed deviation from target contrast ratio

Number0

Returns

Color

Example

.demo {
  color: fs-auto-contrast(darkgreen, (#fff, #555, #000));
}

Links

Author

  • Based on work by voxpelli and xi

fs-color

@function fs-color($keys...) { ... }
View source

Description

Helper to get color value from $fs-colors map

Parameters

NameDescriptionTypeDefault value
$keys

key/value

Arglist—

Returns

Color —

Color value

Throws

  • πŸ”΄ $fs-colors map does not exist

  • πŸ”΄ Color map does not contain any items

  • πŸ”΄ #{$keys} is not a valid color

Requires

fs-easing

@function fs-easing($name) { ... }
View source

Description

Custom easing function

Parameters

NameDescriptionTypeDefault value
$name

Name of easing

String—

Returns

String —

Easing code

Requires

fs-em

@function fs-em($values, $context: $fs-base-font-size) { ... }
View source

Description

Convert px to em

Parameters

NameDescriptionTypeDefault value
$values

Value or values to convert

Number or Map—
$context

Base font size

Number$fs-base-font-size

Returns

Any type —

Converted value or list of values

Throws

  • πŸ”΄ #{$context} size must be in pixels

Requires

Used by

fs-svg

@function fs-svg($name) { ... }
View source

Description

⚠️ DEPRECATED: use fs-svg-url instead. Helper to get URL-escaped inline SVG code for use with background-image

Parameters

NameDescriptionTypeDefault value
$name

Icon name

String—

Returns

Color —

$color - Fill color

Throws

  • πŸ”΄ icon β€œ#{$name}” does not exists in $fs-svg-icons map

Requires

Links

fs-rem

@function fs-rem($values, $context: $fs-base-font-size) { ... }
View source

Description

Convert px to rem

Parameters

NameDescriptionTypeDefault value
$values

Value values to convert

Number or Map—
$context

Base font size

Number$fs-base-font-size

Returns

Any type —

Converted value or list of values

Requires

Used by

fs-scale

@function fs-scale($start, $end, $min-width, $max-width) { ... }
View source

Description

Scale a value relative to the viewport width using calc() and viewport units

Parameters

NameDescriptionTypeDefault value
$start

Starting value

Number—
$end

Ending value

Number—
$min-width

Starting viewport width

Number—
$max-width

Ending viewport width

Number—

Returns

String —

Custom calc() formula

Example

p {
  font-size: fs-scale(20px, 30px, 320px, 400px);
}

Throws

  • πŸ”΄ fs-scale() units don’t match

Requires

Used by

Links

fs-svg-url

@function fs-svg-url($name, $props) { ... }
View source

Description

Inline SVG in url() for background-image

Parameters

NameDescriptionTypeDefault value
$name

SVG name

String—
$props

SVG attributes

Map—

Returns

String —

Inline SVG as url("data:image/svg+xml,…")

Example

.foo {
  background-image: fs-svg-url('chevDown', (fill: none, stroke: red, stroke-width: 1px));
}

Throws

  • πŸ”΄ $svg-map doesn’t exist

  • πŸ”΄ $svg-map isn’t a valid Sass map

  • πŸ”΄ icon β€œ#{$name}” not found in $svg-map

Requires

Used by

Links

fs-zindex

@function fs-zindex($keys...) { ... }
View source

Description

Get z-index layer from $fs-zindex map variable

Parameters

NameDescriptionTypeDefault value
$keys

key/value

Arglist—

Returns

Number —

z-index value

Throws

  • πŸ”΄ $fs-zindex map does not exist

  • πŸ”΄ $fs-zindex map does not contain any items

Requires

Links

mixins

fs-absolute-fill

@mixin fs-absolute-fill() { ... }
View source

Description

Absolutely position an element and fill available space

Parameters

None.

fs-angle

@mixin fs-angle($angle, $color, $position: 'top', $pseudo: 'before') { ... }
View source

Description

Apply an angled edge using a pseudo-element with a diagonal background

Parameters

NameDescriptionTypeDefault value
$angle

Angle

Angle—
$color

Background color

Color—
$position

Either top or bottom

String'top'
$pseudo

Either before or after

String'before'

Links

Author

  • Hugo Giraudel

fs-aspect-ratio

@mixin fs-aspect-ratio($ratio) { ... }
View source

Description

Maintain aspect ratio

Parameters

NameDescriptionTypeDefault value
$ratio

Aspect ratio (width / height)

Number—

Example

16:9 aspect ratio

.foo {
  @include fs-aspect-ratio(16/9);
}

fs-burger

@mixin fs-burger($width: 30px, $height: 5px, $gutter: 3px, $color: currentColor, $border-radius: 0, $transition-duration: 300ms) { ... }
View source

Description

Burger menu icon mixin

Parameters

NameDescriptionTypeDefault value
$width

Icon width

Number30px
$height

Bar height

Number5px
$gutter

Gap between bars

Number3px
$color

Icon color

ColorcurrentColor
$border-radius

Border radius

Number0
$transition-duration

Transition duration

Number300ms

Example

.icon {
  @include fs-burger(
    $color: #fff,
    $gutter: 3px,
    $height: 3px,
    $transition-duration: 200ms,
    $width: 20px
  );

Links

Author

  • Joren Van Hee

fs-burger-to-cross

@mixin fs-burger-to-cross() { ... }
View source

Parameters

None.

Example

.icon {
  @include fs-burger(
    $color: #fff,
    $gutter: 3px,
    $height: 3px,
    $transition-duration: 200ms,
    $width: 20px
  );

  &.is-active {
    @include fs-burger-to-cross;
  }
}

fs-clearfix

@mixin fs-clearfix() { ... }
View source

Description

Clears floats in IE 8+

Parameters

None.

Links

fs-contrast-test

@mixin fs-contrast-test($color1, $color2, $threshold: 4.5) { ... }
View source

Description

Warn if the contrast is below a threshold

Parameters

NameDescriptionTypeDefault value
$color1

background color

Color—
$color2

foreground color

Color—
$threshold

Minimum contrast threshold

Number4.5

Links

fs-font-smoothing

@mixin fs-font-smoothing($enabled) { ... }
View source

Description

Apply font smoothing in Safari, Chrome, and Firefox. Use sparringly!

Parameters

NameDescriptionTypeDefault value
$enabled

Enable or disable smoothing

Boolean—

Links

fs-hide-text

@mixin fs-hide-text() { ... }
View source

Description

Hide text in element, requires setting height and width

Parameters

None.

Links

fs-link-colors

@mixin fs-link-colors($static, $visited: $static, $attention) { ... }
View source

Description

Helper mixin to set link colors

Parameters

NameDescriptionTypeDefault value
$static

Static link color

Color—
$visited

Visited link color (optional)

Color$static
$attention

Hover/focus/active link color

Color—

Example

a {
  @include fs-link-colors(
    $static: blue,
    $attention: red,
    $visited: purple
  );
}

fs-media

@mixin fs-media($conditions) { ... }
View source

Description

Base media query mixin

Parameters

NameDescriptionTypeDefault value
$conditions

Width or map of conditions

Number or Map—

Example

@include fs-media((min-width: 600px)) {…}

@include fs-media((min-width: 600px, max-width: 900px, min-height: 500px, min-aspect-ratio: "1/1")) {…}

Throws

  • πŸ”΄ β€œ#{$conditions}” is not a valid Sass map

Used by

fs-min-width

@mixin fs-min-width($width) { ... }
View source

Description

Min-width media query helper

Parameters

NameDescriptionTypeDefault value
$width

Breakpoint width

Number—

Example

@include fs-min-width(960px) {…}

Requires

Used by

fs-max-width

@mixin fs-max-width($width) { ... }
View source

Description

Max-width media query helper

Parameters

NameDescriptionTypeDefault value
$width

Breakpoint width

Number—

Example

@include fs-max-width(960px) {…}

Requires

Used by

fs-min-height

@mixin fs-min-height($height) { ... }
View source

Description

Min-height media query helper

Parameters

NameDescriptionTypeDefault value
$height

Breakpoint height

Number—

Example

@include fs-min-height(500px) {…}

Requires

fs-max-height

@mixin fs-max-height($height) { ... }
View source

Description

Max-height media query helper

Parameters

NameDescriptionTypeDefault value
$height

Breakpoint height

Number—

Example

@include fs-max-height(500px) {…}

Requires

fs-print-hide

@mixin fs-print-hide() { ... }
View source

Description

Hide in print view

Parameters

None.

fs-print-only

@mixin fs-print-only() { ... }
View source

Description

Only show in print view

Parameters

None.

fs-quantity

@mixin fs-quantity($arg) { ... }
View source

Description

Quantity query mixin

Parameters

NameDescriptionTypeDefault value
$arg

Quantity query

String or Number—

Example

@include fs-quantity(8) {
  /* Exactly 8 */
}

@include fs-quantity(8 12) {
  /* At least 8 and at most 12 */
}

@include fs-quantity(odd) {
  /* Odd quantity */
}

@include fs-quantity(even) {
  /* Even quantity*/
}

@include fs-quantity('<8') {
  /* Less than 8 */
}

@include fs-quantity('<=8') {
  /* Less than or equal to 8 */
}

@include fs-quantity('>8') {
  /* More than 8 */
}

@include fs-quantity('>=8') {
  /* More than or equal to 8 */
}

Requires

Links

Author

  • Indrek Paas

fs-reset-input

@mixin fs-reset-input() { ... }
View source

Description

Reset input styles

Parameters

None.

Used by

fs-reset-button

@mixin fs-reset-button() { ... }
View source

Description

Reset button styles

Parameters

None.

Requires

fs-reset-textarea

@mixin fs-reset-textarea() { ... }
View source

Description

Reset textarea styles

Parameters

None.

fs-reset-list

@mixin fs-reset-list() { ... }
View source

Description

Reset list styles

Parameters

None.

fs-scale-mq

@mixin fs-scale-mq($property, $start, $end, $min-width, $max-width, $min-step: null, $max-steps: 10) { ... }
View source

Description

⚠️ DEPRECATED: use fs-scale instead. Scale a value relative to the viewport width by generating media queries at set intervals

Parameters

NameDescriptionTypeDefault value
$property

Property to scale

String—
$start

Starting value

Number—
$end

Ending value

Number—
$min-width

Starting viewport width

Number—
$max-width

Ending viewport width

Number—
$min-step

Minimum increment to adjust value

Numbernull
$max-steps

Maximum number of times to adjust the value

Number10

Example

@include fs-scale-mq(line-height, 1.7, 1.5, 320px, 450px, $min-step: 0.05);

Throws

  • πŸ”΄ fs-scale-mq() max-width must be greater than min-width

  • πŸ”΄ fs-scale-mq() units don’t match

  • πŸ”΄ $min-step units in fs-scale-mq() don’t match

  • πŸ”΄ $max-steps in fs-scale-mq() must be a unitless number

Requires

Links

fs-scale-text

@mixin fs-scale-text($start, $end, $font-increment: 2px, $line-height-increment: 0.1, $start-width: 320px, $end-width: 1000px, $context: $fs-base-font-size, $units: '%') { ... }
View source

Description

⚠️ DEPRECATED: use fs-scale instead. Automatically scale font-size and line-height

Parameters

NameDescriptionTypeDefault value
$start

Starting font-size and line-height (optional)

Number or List—
$end

Ending font-size and line-height (optional)

Number or List—
$font-increment

Font-size increment

Number2px
$line-height-increment

Line-height increment (optional)

Number0.1
$start-width

Starting viewport width

Number320px
$end-width

Ending viewport width

Number1000px
$context

Base font-size (optional)

Number$fs-base-font-size
$units

font-size units (optional, defaults to '%')

String'%'

Example

// Basic example
@include fs-scale-text(
  $start: 32px,
  $end: 50px,
  $font-increment: 3px,
  $start-width: 400px,
  $end-width: 800px
);

// With line-height and custom units
@include fs-scale-text(
  $start: 32px 1.25,
  $end: 50px 1.1,
  $font-increment: 3px,
  $line-height-increment: 0.05,
  $start-width: 400px,
  $end-width: 800px,
  $units: 'em'
);

Throws

  • πŸ”΄ max font size must be greater than min font size for #{&}

  • πŸ”΄ starting and ending font sizes must be in pixels for #{&}

  • πŸ”΄ font increment must be in pixels for #{&}

  • πŸ”΄ font context size must be in pixels for #{&}

  • πŸ”΄ ending width must be greater than starting width for #{&}

  • πŸ”΄ starting width must be a pixel value for #{&}

  • πŸ”΄ ending width must be a pixel value for #{&}

  • πŸ”΄ fs-scale-text() output units must be %, px, em, or rem for #{&}

Requires

Links

fs-scale

@mixin fs-scale($properties, $map, $initial: true, $units: 'rem') { ... }
View source

Description

Scale a value for any number of properites relative to the viewport width

Parameters

NameDescriptionTypeDefault value
$properties

Properties to scale

String or List—
$map

Map of breakpoints and values

Map—
$initial

Output initial value (not inside media query)

Booleantrue
$units

Output units

String'rem'

Example

@include fs-scale(font-size, (320px: 18px, 1024px: 38px));
@include fs-scale(margin-bottom margin-top, (
  320px: 18px,
  768px: 26px,
  1024px: 38px
));
@include fs-scale(font-size, (768px: 26px, 1024px: 38px), $initial: false);
@include fs-scale(font-size, (768px: 26px, 1024px: 38px), $units: 'em');

Requires

Links

fs-text-optimize

@mixin fs-text-optimize() { ... }
View source

Description

Helper for setting text-rendering: optimizeLegibility;

Parameters

None.

fs-triangle

@mixin fs-triangle($size, $color, $direction) { ... }
View source

Description

Triangle mixin (from Bourbon)

Parameters

NameDescriptionTypeDefault value
$size

Height of triangle

Number—
$color

Hex color value

Color—
$direction

Up, down, left, or right

String—

Links

Author

fs-vert-center

@mixin fs-vert-center($position: relative) { ... }
View source

Description

Vertically center an element

Parameters

NameDescriptionTypeDefault value
$position

Positioning

Stringrelative

Links

fs-undo-vert-center

@mixin fs-undo-vert-center() { ... }
View source

Description

Reset vertical center styles

Parameters

None.

fs-visually-hidden

@mixin fs-visually-hidden() { ... }
View source

Description

Hide visually but still be available to screenreaders

Parameters

None.

Links

Author

  • Jonathan Snook

fs-undo-visually-hidden

@mixin fs-undo-visually-hidden() { ... }
View source

Description

Undo visually hidden styles

Parameters

None.

fs-break-word

@mixin fs-break-word() { ... }
View source

Description

Break long words, hyphenate if possible (requires lang attribute)

Parameters

None.

Links

variables

fs-base-font-size

$fs-base-font-size: 16px !default;
View source

Description

Base font size

Type

Number

Used by

fs-breakpoints

$fs-breakpoints: (
  'global': (
    'narrow' : 320px,
    'small'  : 480px,
    'medium' : 640px,
    'wide'   : 960px,
    'full'   : 1200px
  )
) !default;
View source

Description

Named breakpoints map

Type

Map

Used by

fs-colors

$fs-colors: (
  'base': (
    'red': #ff4136,
    'orange': #ff851b,
    'yellow': #ffdc00,
    'green': #2ecc40,
    'blue': #0074d9,
    'purple': #b10dc9,
    'white': #fff,
    'gray': #ccc,
    'black': #000,
  )
) !default;
View source

Description

Colors map

Type

Map

Used by

Links

fs-easings

$fs-easings: (
  'linear'         : '0.250, 0.250, 0.750, 0.750',
  'ease'           : '0.250, 0.100, 0.250, 1.000',
  'ease-in'        : '0.420, 0.000, 1.000, 1.000',
  'ease-out'       : '0.000, 0.000, 0.580, 1.000',
  'ease-in-out'    : '0.420, 0.000, 0.580, 1.000',
  'easeInQuad'     : '0.550, 0.085, 0.680, 0.530',
  'easeInCubic'    : '0.550, 0.055, 0.675, 0.190',
  'easeInQuart'    : '0.895, 0.030, 0.685, 0.220',
  'easeInQuint'    : '0.755, 0.050, 0.855, 0.060',
  'easeInSine'     : '0.470, 0.000, 0.745, 0.715',
  'easeInExpo'     : '0.950, 0.050, 0.795, 0.035',
  'easeInCirc'     : '0.600, 0.040, 0.980, 0.335',
  'easeInBack'     : '0.600, -0.280, 0.735, 0.045',
  'easeOutQuad'    : '0.250, 0.460, 0.450, 0.940',
  'easeOutCubic'   : '0.215, 0.610, 0.355, 1.000',
  'easeOutQuart'   : '0.165, 0.840, 0.440, 1.000',
  'easeOutQuint'   : '0.230, 1.000, 0.320, 1.000',
  'easeOutSine'    : '0.390, 0.575, 0.565, 1.000',
  'easeOutExpo'    : '0.190, 1.000, 0.220, 1.000',
  'easeOutCirc'    : '0.075, 0.820, 0.165, 1.000',
  'easeOutBack'    : '0.175, 0.885, 0.320, 1.275',
  'easeInOutQuad'  : '0.455, 0.030, 0.515, 0.955',
  'easeInOutCubic' : '0.645, 0.045, 0.355, 1.000',
  'easeInOutQuart' : '0.770, 0.000, 0.175, 1.000',
  'easeInOutQuint' : '0.860, 0.000, 0.070, 1.000',
  'easeInOutSine'  : '0.445, 0.050, 0.550, 0.950',
  'easeInOutExpo'  : '1.000, 0.000, 0.000, 1.000',
  'easeInOutCirc'  : '0.785, 0.135, 0.150, 0.860',
  'easeInOutBack'  : '0.680, -0.550, 0.265, 1.55'
);
View source

Description

Custom easings map

Type

Map

Used by

Links

fs-escape-chars

$fs-escape-chars: (
  '"': '\'',
  '%': '%25',
  '#': '%23',
  '<': '%3C',
  '>': '%3E',
);
View source

Description

Characters to escape from SVGs

Type

Map

Used by

fs-svg-icons

$fs-svg-icons: (
  close: (
    height: 28,
    width: 22,
    data: '<path d="M20.28 20.66q0 .62-.44 1.06l-2.12 2.12q-.44.44-1.06.44t-1.07-.44l-4.6-4.6-4.6 4.6q-.43.44-1.06.44t-1.06-.44l-2.12-2.12q-.44-.44-.44-1.06t.44-1.07l4.6-4.6-4.6-4.6q-.44-.43-.44-1.06t.44-1.06l2.12-2.12q.44-.44 1.06-.44t1.07.44l4.6 4.6 4.6-4.6q.43-.44 1.06-.44t1.06.44l2.12 2.12q.44.44.44 1.06t-.44 1.07l-4.6 4.6 4.6 4.6q.44.43.44 1.06z"/>'
  ),
  search: (
    height: 28,
    width: 26,
    data: '<path d="M18 13q0-2.9-2.06-4.95T11 6 6.05 8.06 4 13t2.05 4.95T11 20t4.95-2.06T18 13zm8 13q0 .8-.6 1.4T24 28q-.84 0-1.4-.6l-5.37-5.34Q14.43 24 11 24q-2.23 0-4.27-.87T3.2 20.8.88 17.26 0 13t.87-4.27T3.2 5.2t3.53-2.33T11 2t4.27.87T18.8 5.2t2.33 3.53T22 13q0 3.44-1.94 6.23l5.36 5.36q.58.57.58 1.4z"/>'
  )
) !default;
View source

Description

⚠️ DEPRECATED: use $fs-svgs instead. SVG icon map for deprecated fs-svg() mixin

Type

Map

Used by

fs-svgs

$fs-svgs: (
  'chevDown': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10" preserveAspectRatio="xMidYMid meet"><path d="M12 0l2 2-7 7.1-7-7L2-.1l5 5z"/></svg>'
);
View source

Description

SVG icons

Type

Map

Used by

fs-zindex

$fs-zindex: (
  'main': 100,
  'tooltip': 200,
  'nav': 300,
  'modal': 9999,
) !default;
View source

Description

Z-index layer map

Type

Map

Used by

math

variables

fs-pi

$fs-pi: 3.141592653589793;
View source

Description

Pi

Type

Number

Used by

Links

Author

  • xi

functions

fs-pow

@function fs-pow($x, $exponent, $steps: 32) { ... }
View source

Description

Power function (supports fractional exponents)

Parameters

NameDescriptionTypeDefault value
$x

Number

Number—
$exponent

Exponent

Number—
$steps

Steps (level of precision)

Number32

Returns

Number

Requires

Used by

Links

Author

  • xi

fs-sqrt

@function fs-sqrt($x, $exponent, $steps: 40) { ... }
View source

Description

Square root function

Parameters

NameDescriptionTypeDefault value
$x

Number

Number—
$exponent

Exponent

Number—
$steps

Steps (level of precision)

Number40

Returns

Number

Requires

Links

Author

  • xi

factorial

@function factorial($number) { ... }
View source

Description

Factorial function

Parameters

NameDescriptionTypeDefault value
$number—Number—

Returns

Number

Links

Author

  • Daniel Perez Alvarez

fs-sin

@function fs-sin($x, $steps: 32) { ... }
View source

Description

Sine function

Parameters

NameDescriptionTypeDefault value
$x

Number

Number—
$steps

Steps (level of precision)

Number32

Returns

Number

Requires

Used by

Links

Author

  • xi

fs-cos

@function fs-cos($x, $steps: 32) { ... }
View source

Description

Cosine function

Parameters

NameDescriptionTypeDefault value
$x

Number

Number—
$steps

Steps (level of precision)

Number32

Returns

Number

Requires

Used by

Links

Author

  • xi

fs-tan

@function fs-tan($x, $steps: 32) { ... }
View source

Description

Tangent function

Parameters

NameDescriptionTypeDefault value
$x

Number

Number—
$steps

Steps (level of precision)

Number32

Returns

Number

Requires

Links

Author

  • xi

fs-ratio

@function fs-ratio($a, $b) { ... }
View source

Description

Return unitless ratio of two values

Parameters

NameDescriptionTypeDefault value
$a

Dividend

Number—
$b

Divisor

Number—

Returns

Number —

Unitless ratio

Throws

  • πŸ”΄ Units do not match: fs-ratio(#{$a}, #{$b})

Requires

sass utils

functions

fs-contains

@function fs-contains($list, $value) { ... }
View source

Description

Check whether $list contains $value.

Parameters

NameDescriptionTypeDefault value
$list

List of values.

List—
$value

Value to check in the list.

Any—

Returns

Boolean

Used by

Links

fs-is-length

@function fs-is-length($value) { ... }
View source

Description

Check whether $value is a valid length.

Parameters

NameDescriptionTypeDefault value
$value

Value to validate.

Any—

Returns

Boolean

Requires

Links

fs-map-deep-get

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

Description

Fetch nested keys

Parameters

NameDescriptionTypeDefault value
$map

Map

Map—
$keys

Keys to fetch

Arglist—

Returns

Any type

Used by

Links

Author

  • Hugo Giraudel

fs-map-deep-set

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

Description

Update a key deeply nested

Parameters

NameDescriptionTypeDefault value
$map

Map to update

Map—
$keys

Keys to access to value to update

Arglist—
$value

New value (last member of $keys)

Any—

Returns

Map —

Updated map

Links

Author

  • Hugo Giraudel

fs-map-depth

@function fs-map-depth($map) { ... }
View source

Description

Compute the maximum depth of a map

Parameters

NameDescriptionTypeDefault value
$map—Map—

Returns

Number —

max depth of $map

Links

Author

  • Hugo Giraudel

fs-map-has-keys

@function fs-map-has-keys($map, $keys...) { ... }
View source

Description

Test if map got all $keys at first level

Parameters

NameDescriptionTypeDefault value
$map

Map

Map—
$keys

Keys to test

Arglist—

Returns

Boolean

Links

Author

  • Hugo Giraudel

fs-map-has-nested-keys

@function fs-map-has-nested-keys($map, $keys...) { ... }
View source

Description

Test if map got all $keys nested with each others

Parameters

NameDescriptionTypeDefault value
$map

Map

Map—
$keys

Keys to test

Arglist—

Returns

Boolean

Links

Author

  • Hugo Giraudel

fs-map-zip

@function fs-map-zip($keys, $values) { ... }
View source

Description

An equivalent of zip function but for maps. Takes two lists, the first for keys, second for values.

Parameters

NameDescriptionTypeDefault value
$keys

Keys for map

List—
$values

Values for map

List—

Returns

Map —

Freshly created map

Links

Author

  • Hugo Giraudel

fs-map-extend

@function fs-map-extend($map, $maps..., $deep) { ... }
View source

Description

jQuery-style extend function About map-merge():

  • only takes 2 arguments
  • is not recursive

Parameters

NameDescriptionTypeDefault value
$map

first map

Map—
$maps

other maps

Arglist—
$deep

recursive mode

Boolean—

Returns

Map

Links

Author

  • Hugo Giraudel

fs-slice

@function fs-slice($list, $start, $end) { ... }
View source

Description

Slices $list between $start and $end.

Parameters

NameDescriptionTypeDefault value
$list

list to slice

List—
$start

(1) - start index

Number—
$end

(length($list)) - end index

Number—

Returns

List</code> or <code>Null

Example

fs-slice(a b c d e, 2, 4)
// b c d
fs-slice(a b c d e, 2, 2)
// b
fs-slice(a b c d e, 4, 2)
// null
fs-slice(a b c d e, -1, 6)
// null

Throws

  • List indexes $start and $end must be numbers for fs-slice.

  • Start index has to be lesser than or equals to the end index for fs-slice.

  • List indexes must be non-zero integers for fs-slice.

  • Start index has to be lesser than or equal to list length for fs-slice.

  • End index has to be lesser than or equal to list length for fs-slice.

Links

Author

  • Hugo Giraudel

fs-str-replace

@function fs-str-replace($string, $search, $replace) { ... }
View source

Description

Replace $search with $replace in $string

Parameters

NameDescriptionTypeDefault value
$string

Initial string

String—
$search

Substring to replace

String—
$replace

('') - New value

String—

Returns

String —

Updated string

Example

fs-str-replace("abcde", "bc", "a") => "aade"

Used by

Links

Author

  • Hugo Giraudel

fs-to-length

@function fs-to-length($value, $unit) { ... }
View source

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

Links

Author

  • Hugo Giraudel

fs-to-number

@function fs-to-number($value) { ... }
View source

Description

Casts a string into a number

Parameters

NameDescriptionTypeDefault value
$value

Value to be parsed

String or Number—

Returns

Number

Used by

Links

Author

  • Hugo Giraudel

fs-strip-unit

@function fs-strip-unit($arg) { ... }
View source

Description

Strip units

Parameters

NameDescriptionTypeDefault value
$arg

Value to strip

Number—

Returns

Number —

Stripped value

Throws

  • πŸ”΄ fs-strip-unit(#{inspect($arg)} is not a valid number

Used by

Links

fs-strip

@function fs-strip($arg) { ... }
View source

Description

⚠️ DEPRECATED: use fs-strip-unit instead. Strips unit from value

Parameters

NameDescriptionTypeDefault value
$arg

Value to strip

Number—

Returns

Number —

Stripped value

Requires

fs-url-encode

@function fs-url-encode($string) { ... }
View source

Description

URL-encode string

Parameters

NameDescriptionTypeDefault value
$string

String to encode

String—

Returns

String —

URL-encoded string

Requires

Used by

variables

fs-debug-mode

$fs-debug-mode: false !default;
View source

Description

Debug mode toggle

Type

Boolean

Used by

mixins

fs-debug

@mixin fs-debug($override) { ... }
View source

Description

Debug helper to conditionally run code

Parameters

NameDescriptionTypeDefault value
$override

Manually override $fs-debug-mode value

Boolean—

Requires

selectors

mixins

fs-static-parent

@mixin fs-static-parent() { ... }
View source

Description

Helper mixin to apply static pesudo selectors to parent

Parameters

None.

Throws

  • πŸ”΄ fs-static-parent(#{inspect($parent)} is not a valid string

fs-attention-parent

@mixin fs-attention-parent() { ... }
View source

Description

Helper mixin to apply :hover, :focus, and :active pesudo selectors to parent

Parameters

None.

Throws

  • πŸ”΄ fs-attention-parent(#{inspect($parent)} is not a valid string

fs-all-states-parent

@mixin fs-all-states-parent() { ... }
View source

Description

Helper mixin to apply all pesudo selectors to parent

Parameters

None.

Throws

  • πŸ”΄ fs-all-states-parent(#{inspect($parent)} is not a valid string

fs-static

@mixin fs-static() { ... }
View source

Description

Helper mixin to apply static pesudo selectors

Parameters

None.

fs-attention

@mixin fs-attention() { ... }
View source

Description

Helper mixin to apply :hover, :focus, and :active pesudo selectors

Parameters

None.

fs-all-states

@mixin fs-all-states() { ... }
View source

Description

Helper mixin to apply all pesudo selectors

Parameters

None.

fs-root-add

@mixin fs-root-add($selector) { ... }
View source

Description

Add selector to root (requires Sass 3.4+)

Parameters

NameDescriptionTypeDefault value
$selector

Selector to add to root

String—

Example

.foo {
  @include fs-root-add(a) {
    content: 'a.foo';
  }

  @include fs-root-add('.bar') {
    content: '.foo.bar';
  }
}

Throws

  • πŸ”΄ selector-append() is not supported. Please upgrade to Sass 3.4+

Links

fs-root-before

@mixin fs-root-before($selector) { ... }
View source

Description

Prepend selector (requires Sass 3.4+)

Parameters

NameDescriptionTypeDefault value
$selector

Selector to insert before root

String—

Example

.foo {
  @include fs-root-before(a) {
    content: 'a .foo';
  }

  @include fs-root-before('.bar') {
    content: '.bar .foo';
  }
}

Throws

  • πŸ”΄ selector-nest() is not supported. Please upgrade to Sass 3.4+

Links

fs-text-inputs

@mixin fs-text-inputs() { ... }
View source

Description

Helper to select all text input types

Parameters

None.