sass.md

Sass API

Mark	Description
✅	Public functions, mixins, placeholders, and variables
❌	Private items - not supported outside package's build
⚠️	Deprecated items - may not be available in future releases

• @carbon/layout
  • ✅carbon--grid-gutter [variable]
  • ✅carbon--grid-gutter--condensed [variable]
  • ✅carbon--grid-breakpoints [variable]
  • ✅carbon--breakpoint-next [function]
  • ✅carbon--breakpoint-prev [function]
  • ✅carbon--is-smallest-breakpoint [function]
  • ✅carbon--largest-breakpoint-name [function]
  • ✅carbon--breakpoint-infix [function]
  • ✅carbon--breakpoint-up [mixin]
  • ✅carbon--breakpoint-down [mixin]
  • ✅carbon--breakpoint-between [mixin]
  • ✅carbon--largest-breakpoint [mixin]
  • ✅carbon--breakpoint [mixin]
  • ✅carbon--container-01 [variable]
  • ✅carbon--container-02 [variable]
  • ✅carbon--container-03 [variable]
  • ✅carbon--container-04 [variable]
  • ✅carbon--container-05 [variable]
  • ✅carbon--container [variable]
  • ✅container-01 [variable]
  • ✅container-02 [variable]
  • ✅container-03 [variable]
  • ✅container-04 [variable]
  • ✅container-05 [variable]
  • ✅carbon--base-font-size [variable]
  • ✅carbon--rem [function]
  • ✅carbon--em [function]
  • ✅carbon--fluid-spacing-01 [variable]
  • ✅carbon--fluid-spacing-02 [variable]
  • ✅carbon--fluid-spacing-03 [variable]
  • ✅carbon--fluid-spacing-04 [variable]
  • ✅carbon--fluid-spacing [variable]
  • ✅fluid-spacing-01 [variable]
  • ✅fluid-spacing-02 [variable]
  • ✅fluid-spacing-03 [variable]
  • ✅fluid-spacing-04 [variable]
  • ✅carbon--icon-size-01 [variable]
  • ✅carbon--icon-size-02 [variable]
  • ✅carbon--icon-size [variable]
  • ✅icon-size-01 [variable]
  • ✅icon-size-02 [variable]
  • ✅carbon--get-column-width [function]
  • ✅carbon--key-height-scales [variable]
  • ✅carbon--key-height [function]
  • ✅carbon--layout-01 [variable]
  • ✅carbon--layout-02 [variable]
  • ✅carbon--layout-03 [variable]
  • ✅carbon--layout-04 [variable]
  • ✅carbon--layout-05 [variable]
  • ✅carbon--layout-06 [variable]
  • ✅carbon--layout-07 [variable]
  • ✅carbon--layout [variable]
  • ✅layout-01 [variable]
  • ✅layout-02 [variable]
  • ✅layout-03 [variable]
  • ✅layout-04 [variable]
  • ✅layout-05 [variable]
  • ✅layout-06 [variable]
  • ✅layout-07 [variable]
  • ✅carbon--mini-unit-size [variable]
  • ✅carbon--mini-units [function]
  • ✅carbon--spacing-01 [variable]
  • ✅carbon--spacing-02 [variable]
  • ✅carbon--spacing-03 [variable]
  • ✅carbon--spacing-04 [variable]
  • ✅carbon--spacing-05 [variable]
  • ✅carbon--spacing-06 [variable]
  • ✅carbon--spacing-07 [variable]
  • ✅carbon--spacing-08 [variable]
  • ✅carbon--spacing-09 [variable]
  • ✅carbon--spacing-10 [variable]
  • ✅carbon--spacing-11 [variable]
  • ✅carbon--spacing-12 [variable]
  • ✅carbon--spacing [variable]
  • ✅spacing-01 [variable]
  • ✅spacing-02 [variable]
  • ✅spacing-03 [variable]
  • ✅spacing-04 [variable]
  • ✅spacing-05 [variable]
  • ✅spacing-06 [variable]
  • ✅spacing-07 [variable]
  • ✅spacing-08 [variable]
  • ✅spacing-09 [variable]
  • ✅spacing-10 [variable]
  • ✅spacing-11 [variable]
  • ✅spacing-12 [variable]
  • ✅map-deep-get [function]
  • ✅carbon--key-by-index [function]
  • ✅last-map-item [function]

@carbon/layout

✅carbon--grid-gutter [variable]

Carbon gutter size in rem

Source code

$carbon--grid-gutter: carbon--rem(32px);

• Group: @carbon/layout
• Type: Number

✅carbon--grid-gutter--condensed [variable]

Carbon condensed gutter size in rem

Source code

$carbon--grid-gutter--condensed: carbon--rem(2px);

• Group: @carbon/layout
• Type: Number

✅carbon--grid-breakpoints [variable]

Source code

$carbon--grid-breakpoints: (
  sm: (
    columns: 4,
    margin: 0,
    width: carbon--rem(320px),
  ),
  md: (
    columns: 8,
    margin: carbon--rem(16px),
    width: carbon--rem(672px),
  ),
  lg: (
    columns: 16,
    margin: carbon--rem(16px),
    width: carbon--rem(1056px),
  ),
  xlg: (
    columns: 16,
    margin: carbon--rem(16px),
    width: carbon--rem(1312px),
  ),
  max: (
    columns: 16,
    margin: carbon--rem(24px),
    width: carbon--rem(1584px),
  ),
);

• Group: @carbon/layout
• Type: Map

✅carbon--breakpoint-next [function]

Get the value of the next breakpoint, or null for the last breakpoint

Source code

@function carbon--breakpoint-next(
  $name,
  $breakpoints: $carbon--grid-breakpoints,
  $breakpoint-names: map-keys($breakpoints)
) {
  $n: index($breakpoint-names, $name);
  @if $n != null and $n < length($breakpoint-names) {
    @return nth($breakpoint-names, $n + 1);
  }
  @return null;
}

• Parameters:

Name	Description	Type	Default value
$name	The name of the brekapoint	String	—
$breakpoints	A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint	Map	$carbon--grid-breakpoints
$breakpoint-names	A list of names from the $breakpoints map	List	map-keys($breakpoints)

• Group: @carbon/layout
• Returns: String

✅carbon--breakpoint-prev [function]

Get the value of the previous breakpoint, or null for the first breakpoint

Source code

@function carbon--breakpoint-prev(
  $name,
  $breakpoints: $carbon--grid-breakpoints,
  $breakpoint-names: map-keys($breakpoints)
) {
  $n: index($breakpoint-names, $name);
  @if $n != null and $n > 1 {
    @return nth($breakpoint-names, $n - 1);
  }
  @return null;
}

• Parameters:

Name	Description	Type	Default value
$name	The name of the brekapoint	String	—
$breakpoints	A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint	Map	$carbon--grid-breakpoints
$breakpoint-names	A list of names from the $breakpoints map	List	map-keys($breakpoints)

• Group: @carbon/layout
• Returns: String

✅carbon--is-smallest-breakpoint [function]

Check to see if the given breakpoint name

Source code

@function carbon--is-smallest-breakpoint(
  $name,
  $breakpoints: $carbon--grid-breakpoints
) {
  @return index(map-keys($breakpoints), $name) == 1;
}

• Parameters:

Name	Description	Type	Default value
$name	The name of the brekapoint	String	—
$breakpoints	A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint	Map	$carbon--grid-breakpoints

• Group: @carbon/layout
• Returns: Bool
• Used by:
  • carbon--breakpoint-up [mixin]
  • carbon--breakpoint-down [mixin]

✅carbon--largest-breakpoint-name [function]

Returns the largest breakpoint name

Source code

@function carbon--largest-breakpoint-name(
  $breakpoints: $carbon--grid-breakpoints
) {
  $total-breakpoints: length($breakpoints);
  @return carbon--key-by-index($breakpoints, $total-breakpoints);
}

• Parameters:

Name	Description	Type	Default value
$breakpoints	A map of breakpoints where the key is the name	Map	$carbon--grid-breakpoints

• Group: @carbon/layout
• Returns: String
• Requires:
  • carbon--key-by-index [function]
• Used by:
  • carbon--largest-breakpoint [mixin]

✅carbon--breakpoint-infix [function]

Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: .prefix--col-sm-2.

Source code

@function carbon--breakpoint-infix($name) {
  @return '-#{$name}';
}

• Parameters:

Name	Description	Type	Default value
$name	The name of the breakpoint	String	—

• Group: @carbon/layout
• Returns: String

✅carbon--breakpoint-up [mixin]

Generate a media query up to the width of the given breakpoint name

Source code

@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
  @if type-of($name) == 'number' {
    @media (min-width: $name) {
      @content;
    }
  } @else if map-has-key($breakpoints, $name) {
    $breakpoint: map-get($breakpoints, $name);
    $width: map-get($breakpoint, width);
    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
      @content;
    } @else {
      @media (min-width: $width) {
        @content;
      }
    }
  } @else {
    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
  }
}

• Parameters:

Name	Description	Type	Default value
$name	—	String | Number	—
$breakpoints	A map of breakpoints where the key is the name	Map	$carbon--grid-breakpoints

• Group: @carbon/layout
• Requires:
  • carbon--is-smallest-breakpoint [function]
• Used by:
  • carbon--breakpoint-between [mixin]
  • carbon--breakpoint [mixin]

✅carbon--breakpoint-down [mixin]

Generate a media query for the maximum width of the given styles

Source code

@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
  @if type-of($name) == 'number' {
    @media (max-width: $name) {
      @content;
    }
  } @else if map-has-key($breakpoints, $name) {
    $breakpoint: map-get($breakpoints, $name);
    $width: map-get($breakpoint, width);
    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
      @content;
    } @else {
      @media (max-width: $width) {
        @content;
      }
    }
  } @else {
    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
  }
}

• Parameters:

Name	Description	Type	Default value
$name	—	String | Number	—
$breakpoints	A map of breakpoints where the key is the name	Map	$carbon--grid-breakpoints

• Group: @carbon/layout
• Requires:
  • carbon--is-smallest-breakpoint [function]
• Used by:
  • carbon--breakpoint-between [mixin]

✅carbon--breakpoint-between [mixin]

Generate a media query for the range between the lower and upper breakpoints

Source code

@mixin carbon--breakpoint-between(
  $lower,
  $upper,
  $breakpoints: $carbon--grid-breakpoints
) {
  $is-number-lower: type-of($lower) == 'number';
  $is-number-upper: type-of($upper) == 'number';
  $min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
  $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));

  @if $min and $max {
    $min-width: if(not $is-number-lower and $min, map-get($min, width), $min);
    $max-width: if(not $is-number-upper and $max, map-get($max, width), $max);
    @media (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else if $min != null and $max == null {
    @include carbon--breakpoint-up($lower) {
      @content;
    }
  } @else if $min == null and $max != null {
    @include carbon--breakpoint-down($upper) {
      @content;
    }
  } @else {
    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).';
  }
}

• Parameters:

Name	Description	Type	Default value
$lower	—	String | Number	—
$upper	—	String | Number	—
$breakpoints	A map of breakpoints where the key is the name	Map	$carbon--grid-breakpoints

• Group: @carbon/layout
• Requires:
  • carbon--breakpoint-up [mixin]
  • carbon--breakpoint-down [mixin]

✅carbon--largest-breakpoint [mixin]

Generate media query for the largest breakpoint

Source code

@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
  @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
    @content;
  }
}

• Parameters:

Name	Description	Type	Default value
$breakpoints	A map of breakpoints where the key is the name	Map	$carbon--grid-breakpoints

• Group: @carbon/layout
• Requires:
  • carbon--breakpoint [mixin]
  • carbon--largest-breakpoint-name [function]

✅carbon--breakpoint [mixin]

Generate a media query for a given breakpoint

Source code

@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
  @include carbon--breakpoint-up($name, $breakpoints) {
    @content;
  }
}

• Parameters:

Name	Description	Type	Default value
$name	—	String | Number	—
$breakpoints	A map of breakpoints where the key is the name	Map	$carbon--grid-breakpoints

• Group: @carbon/layout
• Requires:
  • carbon--breakpoint-up [mixin]
• Used by:
  • carbon--largest-breakpoint [mixin]

✅carbon--container-01 [variable]

Source code

$carbon--container-01: 1.5rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • container-01

✅carbon--container-02 [variable]

Source code

$carbon--container-02: 2rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • container-02

✅carbon--container-03 [variable]

Source code

$carbon--container-03: 2.5rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • container-03

✅carbon--container-04 [variable]

Source code

$carbon--container-04: 3rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • container-04

✅carbon--container-05 [variable]

Source code

$carbon--container-05: 4rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • container-05

✅carbon--container [variable]

Source code

$carbon--container: (
  $carbon--container-01,
  $carbon--container-02,
  $carbon--container-03,
  $carbon--container-04,
  $carbon--container-05
);

• Group: @carbon/layout
• Type: List

✅container-01 [variable]

Source code

$container-01: $carbon--container-01;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--container-01

✅container-02 [variable]

Source code

$container-02: $carbon--container-02;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--container-02

✅container-03 [variable]

Source code

$container-03: $carbon--container-03;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--container-03

✅container-04 [variable]

Source code

$container-04: $carbon--container-04;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--container-04

✅container-05 [variable]

Source code

$container-05: $carbon--container-05;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--container-05

✅carbon--base-font-size [variable]

Default font size

Source code

$carbon--base-font-size: 16px;

• Group: @carbon/layout
• Type: Number
• Used by:
  • carbon--rem [function]
  • carbon--em [function]

✅carbon--rem [function]

Convert a given px unit to a rem unit

Source code

@function carbon--rem($px) {
  @if unit($px) != 'px' {
    // TODO: update to @error in v11
    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
  }

  @return ($px / $carbon--base-font-size) * 1rem;
}

• Parameters:

Name	Description	Type	Default value
$px	Number with px unit	Number	—

• Group: @carbon/layout
• Returns: Number Number with rem unit
• Requires:
  • carbon--base-font-size [variable]
• Used by:
  • carbon--mini-units [function]

✅carbon--em [function]

Convert a given px unit to a em unit

Source code

@function carbon--em($px) {
  @if unit($px) != 'px' {
    // TODO: update to @error in v11
    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
  }

  @return ($px / $carbon--base-font-size) * 1em;
}

• Parameters:

Name	Description	Type	Default value
$px	Number with px unit	Number	—

• Group: @carbon/layout
• Returns: Number Number with em unit
• Requires:
  • carbon--base-font-size [variable]

✅carbon--fluid-spacing-01 [variable]

Source code

$carbon--fluid-spacing-01: 0;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • fluid-spacing-01

✅carbon--fluid-spacing-02 [variable]

Source code

$carbon--fluid-spacing-02: 2vw;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • fluid-spacing-02

✅carbon--fluid-spacing-03 [variable]

Source code

$carbon--fluid-spacing-03: 5vw;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • fluid-spacing-03

✅carbon--fluid-spacing-04 [variable]

Source code

$carbon--fluid-spacing-04: 10vw;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • fluid-spacing-04

✅carbon--fluid-spacing [variable]

Source code

$carbon--fluid-spacing: (
  $carbon--fluid-spacing-01,
  $carbon--fluid-spacing-02,
  $carbon--fluid-spacing-03,
  $carbon--fluid-spacing-04
);

• Group: @carbon/layout
• Type: List

✅fluid-spacing-01 [variable]

Source code

$fluid-spacing-01: $carbon--fluid-spacing-01;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--fluid-spacing-01

✅fluid-spacing-02 [variable]

Source code

$fluid-spacing-02: $carbon--fluid-spacing-02;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--fluid-spacing-02

✅fluid-spacing-03 [variable]

Source code

$fluid-spacing-03: $carbon--fluid-spacing-03;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--fluid-spacing-03

✅fluid-spacing-04 [variable]

Source code

$fluid-spacing-04: $carbon--fluid-spacing-04;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--fluid-spacing-04

✅carbon--icon-size-01 [variable]

Source code

$carbon--icon-size-01: 1rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • icon-size-01

✅carbon--icon-size-02 [variable]

Source code

$carbon--icon-size-02: 1.25rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • icon-size-02

✅carbon--icon-size [variable]

Source code

$carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02);

• Group: @carbon/layout
• Type: List

✅icon-size-01 [variable]

Source code

$icon-size-01: $carbon--icon-size-01;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--icon-size-01

✅icon-size-02 [variable]

Source code

$icon-size-02: $carbon--icon-size-02;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--icon-size-02

✅carbon--get-column-width [function]

Get the column width for a given breakpoint

Source code

@function carbon--get-column-width(
  $breakpoint,
  $breakpoints: $carbon--grid-breakpoints
) {
  @if map-has-key($breakpoints, $breakpoint) {
    $values: map-get($breakpoints, $breakpoint);
    $width: map-get($values, width);
    $margin: map-get($values, margin);
    $columns: map-get($values, columns);

    @return ($width - (2 * $margin)) / $columns;
  } @else {
    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
  }
}

• Parameters:

Name	Description	Type	Default value
$breakpoint	—	String	—
$breakpoints	—	Map	$carbon--grid-breakpoints

• Group: @carbon/layout
• Returns: Number In rem

✅carbon--key-height-scales [variable]

Source code

$carbon--key-height-scales: (
  sm: (
    carbon--get-column-width(sm),
    carbon--get-column-width(sm) * 2,
    carbon--get-column-width(sm) * 3,
    carbon--get-column-width(sm) * 4,
    carbon--get-column-width(sm) * 5,
    carbon--get-column-width(sm) * 6,
  ),
  md: (
    carbon--get-column-width(md),
    carbon--get-column-width(md) * 2,
    carbon--get-column-width(md) * 3,
    carbon--get-column-width(md) * 4,
    carbon--get-column-width(md) * 5,
    carbon--get-column-width(md) * 6,
  ),
  lg: (
    carbon--get-column-width(lg),
    carbon--get-column-width(lg) * 2,
    carbon--get-column-width(lg) * 3,
    carbon--get-column-width(lg) * 4,
    carbon--get-column-width(lg) * 5,
    carbon--get-column-width(lg) * 6,
    carbon--get-column-width(lg) * 7,
    carbon--get-column-width(lg) * 8,
  ),
  xlg: (
    carbon--get-column-width(xlg),
    carbon--get-column-width(xlg) * 2,
    carbon--get-column-width(xlg) * 3,
    carbon--get-column-width(xlg) * 4,
    carbon--get-column-width(xlg) * 5,
    carbon--get-column-width(xlg) * 6,
    carbon--get-column-width(xlg) * 7,
    carbon--get-column-width(xlg) * 8,
  ),
  max: (
    carbon--get-column-width(max),
    carbon--get-column-width(max) * 2,
    carbon--get-column-width(max) * 3,
    carbon--get-column-width(max) * 4,
    carbon--get-column-width(max) * 5,
    carbon--get-column-width(max) * 6,
    carbon--get-column-width(max) * 7,
    carbon--get-column-width(max) * 8,
  ),
);

• Group: @carbon/layout
• Type: Map
• Used by:
  • carbon--key-height [function]

✅carbon--key-height [function]

Get the value of a key height step at a given breakpoint

Source code

@function carbon--key-height($breakpoint, $step) {
  @if map-has-key($carbon--key-height-scales, $breakpoint) {
    @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
  } @else {
    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
  }
}

• Parameters:

Name	Description	Type	Default value
$breakpoint	—	String	—
$step	—	Number	—

• Group: @carbon/layout
• Returns: Number In rem
• Requires:
  • carbon--key-height-scales [variable]

✅carbon--layout-01 [variable]

Source code

$carbon--layout-01: 1rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • layout-01

✅carbon--layout-02 [variable]

Source code

$carbon--layout-02: 1.5rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • layout-02

✅carbon--layout-03 [variable]

Source code

$carbon--layout-03: 2rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • layout-03

✅carbon--layout-04 [variable]

Source code

$carbon--layout-04: 3rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • layout-04

✅carbon--layout-05 [variable]

Source code

$carbon--layout-05: 4rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • layout-05

✅carbon--layout-06 [variable]

Source code

$carbon--layout-06: 6rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • layout-06

✅carbon--layout-07 [variable]

Source code

$carbon--layout-07: 10rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • layout-07

✅carbon--layout [variable]

Source code

$carbon--layout: (
  $carbon--layout-01,
  $carbon--layout-02,
  $carbon--layout-03,
  $carbon--layout-04,
  $carbon--layout-05,
  $carbon--layout-06,
  $carbon--layout-07
);

• Group: @carbon/layout
• Type: List

✅layout-01 [variable]

Source code

$layout-01: $carbon--layout-01;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--layout-01

✅layout-02 [variable]

Source code

$layout-02: $carbon--layout-02;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--layout-02

✅layout-03 [variable]

Source code

$layout-03: $carbon--layout-03;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--layout-03

✅layout-04 [variable]

Source code

$layout-04: $carbon--layout-04;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--layout-04

✅layout-05 [variable]

Source code

$layout-05: $carbon--layout-05;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--layout-05

✅layout-06 [variable]

Source code

$layout-06: $carbon--layout-06;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--layout-06

✅layout-07 [variable]

Source code

$layout-07: $carbon--layout-07;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--layout-07

✅carbon--mini-unit-size [variable]

Default mini-unit value

Source code

$carbon--mini-unit-size: 8px;

• Group: @carbon/layout
• Type: Number
• Used by:
  • carbon--mini-units [function]

✅carbon--mini-units [function]

Get the value of the corresponding number of units

Source code

@function carbon--mini-units($count) {
  @return carbon--rem($carbon--mini-unit-size * $count);
}

• Parameters:

Name	Description	Type	Default value
$count	The number of units to get the value for	Number	—

• Group: @carbon/layout
• Returns: Number In rem units
• Requires:
  • carbon--rem [function]
  • carbon--mini-unit-size [variable]

✅carbon--spacing-01 [variable]

Source code

$carbon--spacing-01: 0.125rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-01

✅carbon--spacing-02 [variable]

Source code

$carbon--spacing-02: 0.25rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-02

✅carbon--spacing-03 [variable]

Source code

$carbon--spacing-03: 0.5rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-03

✅carbon--spacing-04 [variable]

Source code

$carbon--spacing-04: 0.75rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-04

✅carbon--spacing-05 [variable]

Source code

$carbon--spacing-05: 1rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-05

✅carbon--spacing-06 [variable]

Source code

$carbon--spacing-06: 1.5rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-06

✅carbon--spacing-07 [variable]

Source code

$carbon--spacing-07: 2rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-07

✅carbon--spacing-08 [variable]

Source code

$carbon--spacing-08: 2.5rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-08

✅carbon--spacing-09 [variable]

Source code

$carbon--spacing-09: 3rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-09

✅carbon--spacing-10 [variable]

Source code

$carbon--spacing-10: 4rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-10

✅carbon--spacing-11 [variable]

Source code

$carbon--spacing-11: 5rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-11

✅carbon--spacing-12 [variable]

Source code

$carbon--spacing-12: 6rem;

• Group: @carbon/layout
• Type: Number
• Aliased:
  • spacing-12

✅carbon--spacing [variable]

Source code

$carbon--spacing: (
  $carbon--spacing-01,
  $carbon--spacing-02,
  $carbon--spacing-03,
  $carbon--spacing-04,
  $carbon--spacing-05,
  $carbon--spacing-06,
  $carbon--spacing-07,
  $carbon--spacing-08,
  $carbon--spacing-09,
  $carbon--spacing-10,
  $carbon--spacing-11,
  $carbon--spacing-12
);

• Group: @carbon/layout
• Type: List

✅spacing-01 [variable]

Source code

$spacing-01: $carbon--spacing-01;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-01

✅spacing-02 [variable]

Source code

$spacing-02: $carbon--spacing-02;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-02

✅spacing-03 [variable]

Source code

$spacing-03: $carbon--spacing-03;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-03

✅spacing-04 [variable]

Source code

$spacing-04: $carbon--spacing-04;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-04

✅spacing-05 [variable]

Source code

$spacing-05: $carbon--spacing-05;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-05

✅spacing-06 [variable]

Source code

$spacing-06: $carbon--spacing-06;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-06

✅spacing-07 [variable]

Source code

$spacing-07: $carbon--spacing-07;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-07

✅spacing-08 [variable]

Source code

$spacing-08: $carbon--spacing-08;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-08

✅spacing-09 [variable]

Source code

$spacing-09: $carbon--spacing-09;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-09

✅spacing-10 [variable]

Source code

$spacing-10: $carbon--spacing-10;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-10

✅spacing-11 [variable]

Source code

$spacing-11: $carbon--spacing-11;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-11

✅spacing-12 [variable]

Source code

$spacing-12: $carbon--spacing-12;

• Group: @carbon/layout
• Type: Number
• Alias: carbon--spacing-12

✅map-deep-get [function]

Map deep get

Source code

@function map-deep-get($map, $keys) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

• Parameters:

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

• Group: @carbon/layout
• Returns: * Desired value

✅carbon--key-by-index [function]

Provide a map and index, and get back the relevant key value

Source code

@function carbon--key-by-index($map, $index) {
  $keys: map-keys($map);
  @return nth($keys, $index);
}

• Parameters:

Name	Description	Type	Default value
$map	Map	Map	—
$index	Key chain	Integer	—

• Group: @carbon/layout
• Returns: String Desired value
• Used by:
  • carbon--largest-breakpoint-name [function]
  • last-map-item [function]

✅last-map-item [function]

Pass in a map, and get the last one in the list back

Source code

@function last-map-item($map) {
  $total-length: length($map);
  @return map-get($map, carbon--key-by-index($map, $total-length));
}

• Parameters:

Name	Description	Type	Default value
$map	Map	Map	—

• Group: @carbon/layout
• Returns: * Desired value
• Requires:
  • carbon--key-by-index [function]