General

variables

root-font-family

$root-font-family: 'Fira Code' !default;

Type

String</code> or <code>List

root-font-size

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

Type

Stirng

[private] font-scales

$font-scales: (
  'h1': 3.815,
  'h2': 3.052,
  'h3': 2.441,
  'h4': 1.953,
  'h5': 1.563,
  'h6': 1.25,
  'p': 1,
  'label': 0.875,
) !default;

Description

1.250 Major Third

Type

Map

Links

breakpoints

$breakpoints: (
  xs: px2em(360),
  sm: px2em(576),
  md: px2em(768),
  lg: px2em(992),
  xl: px2em(1200),
  ul: px2em(1400),
) !default;

Description

A collection of media breakpoints.

Type

Map

Requires

Used by

debug-mode

$debug-mode: true !default;

Type

Boolean

debug-breakpoints

$debug-breakpoints: $breakpoints !default;

Type

Map

functions

px2em

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

Description

Converts px to em.

Parameters

NameDescriptionTypeDefault value
$px

Px value to translate

Number—
$base-font-size

Base font size

Number16px

Returns

Number —

Em value

Used by

px2rem

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

Description

Converts rem to px.

Parameters

NameDescriptionTypeDefault value
$px

Px value to translate

Number—
$base-font-size

Base font size

Number16px

Returns

Number —

Rem value

tint

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

Description

Lighten a color by mixing it with white.

Parameters

NameDescriptionTypeDefault value
$color

Color to lighten

Color—
$percentage

Amount of white color to mix in

Number—

Returns

Color

Author

  • Sindre Sorhus

shade

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

Description

Darken a color by mixing it with black.

Parameters

NameDescriptionTypeDefault value
$color

Color to darken

Color—
$percentage

Amount of black color to mix in

Number—

Returns

Color

Author

  • Sindre Sorhus

string-replace

@function string-replace($string, $search, $replacement) { ... }

Description

$string içindeki $search alt dizgisini $replacement ile değiştirir.

Parameters

NameDescriptionTypeDefault value
$string

Aranacak dize

String—
$search

$string içinde aranacak alt dizi

String—
$replacement

$search için yerine konacak değer

String—

Returns

String

Used by

Author

  • Sindre Sorhus

url-encode

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

Description

Encode URL-unsafe characters in $string.

Parameters

NameDescriptionTypeDefault value
$string—String—

Returns

String

Requires

Used by

Author

  • Sindre Sorhus

svg-url

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

Description

Use SVG anywhere a url() is accepted, like in a background property.

Parameters

NameDescriptionTypeDefault value
$svg

SVG string. The xmlns attribute is added for you.

String—

Example

body {
  background: svg-url('<svg>...</svg>');
}

Requires

Author

  • Sindre Sorhus

[private] get-breakpoint

@function get-breakpoint($value) { ... }

Description

Retrieves the value of a breakpoint from the breakpoints map.

Parameters

NameDescriptionTypeDefault value
$value

The key or value of the breakpoint.

String—

Returns

Number —

The corresponding value of the breakpoint.

Throws

  • #{$value} does not exist in $breakpoints

Requires

Used by

[private] get-value

@function get-value($value) { ... }

Description

Checks the provided value and converts it to a valid breakpoint value.

Parameters

NameDescriptionTypeDefault value
$value

The value to check.

String or Number—

Returns

Number —

The valid breakpoint value.

Requires

Used by

  • [mixin] mq
  • [mixin] mq

mixins

theme

@mixin theme($theme: default) { ... }

Description

Sets theme-specific style settings

Parameters

NameDescriptionTypeDefault value
$theme

Theme name

Stringdefault

Example

.foo {
   @include theme() {
     color: black;
  }
}

Output Css

html[data-theme=default] .foo {
  color: black;
}

truncate

@mixin truncate($max-line: 2) { ... }

Description

Determines the maximum number of lines of the element. If the maximum line is exceeded, it cuts off the extra lines and puts "..." at the end of the last line.

Parameters

NameDescriptionTypeDefault value
$max-line

Maximum number of rows

Number2

Example

.foo {
  @include truncate();
}

gradient-truncate

@mixin gradient-truncate($max-line: 2, $background-color: #fff) { ... }

Description

It determines the maximum number of lines of the element. If the maximum line is exceeded, it cuts off the excess lines and makes the last line transparent with a linear gradient.

Parameters

NameDescriptionTypeDefault value
$max-line

Maximum number of rows

Number2
$background-color

Gradient color

String#fff

mq

@mixin mq($min, $max) { ... }

Description

Generates a media query mixin based on the provided minimum and maximum breakpoints.

Parameters

NameDescriptionTypeDefault value
$min

The minimum breakpoint value.

Number or Null—
$max

The maximum breakpoint value.

Number or Null—

Example

// Usage 1: Only minimum breakpoint
// When the screen size is medium or larger
mq(md) {
  // Styles for medium and larger screens
  color: blue;
}

// Usage 2: Both minimum and maximum breakpoints
// When the screen size is small to extra-large
mq(sm, xl) {
  // Styles for small to extra-large screens
  font-size: 16px;
}

// Usage 3: Only maximum breakpoint
// When the screen size is smaller than extra-large
mq(null, xl) {
  // Styles for screens smaller than extra-large
  background: lightgray;
}

Requires