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--base-font-size [variable]
- ✅carbon--rem [function]
- ✅carbon--em [function]
- ✅carbon--get-column-width [function]
- ✅carbon--key-height-scales [variable]
- ✅carbon--key-height [function]
- ✅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]
- ✅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--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]
- ✅map-deep-get [function]
- ✅carbon--key-by-index [function]
- ✅last-map-item [function]
Carbon gutter size in rem
Source code
$carbon--grid-gutter: carbon--rem(32px);
- Group: @carbon/layout
- Type:
Number
Carbon condensed gutter size in rem
Source code
$carbon--grid-gutter--condensed: carbon--rem(2px);
- Group: @carbon/layout
- Type:
Number
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(16px),
width: carbon--rem(1584px),
),
);
- Group: @carbon/layout
- Type:
Map
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
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
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:
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:
- Used by:
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
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:
- Used by:
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:
- Used by:
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:
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:
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:
- Used by:
Default font size
Source code
$carbon--base-font-size: 16px;
- Group: @carbon/layout
- Type:
Number
- Used by:
Convert a given px unit to a rem unit
Source code
@function carbon--rem($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:
- Used by:
Convert a given px unit to a em unit
Source code
@function carbon--em($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:
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
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:
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:
Default mini-unit value
Source code
$carbon--mini-unit-size: 8px;
- Group: @carbon/layout
- Type:
Number
- Used by:
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:
0.125rem (2px) spacing with default mini unit
Source code
$carbon--spacing-01: carbon--mini-units(0.25);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-01
0.25rem (4px) spacing with default mini unit
Source code
$carbon--spacing-02: carbon--mini-units(0.5);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-02
0.5rem (8px) spacing with default mini unit
Source code
$carbon--spacing-03: carbon--mini-units(1);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-03
0.75rem (12px) spacing with default mini unit
Source code
$carbon--spacing-04: carbon--mini-units(1.5);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-04
1rem (16px) spacing with default mini unit
Source code
$carbon--spacing-05: carbon--mini-units(2);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-05
1.5rem (24px) spacing with default mini unit
Source code
$carbon--spacing-06: carbon--mini-units(3);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-06
2rem (32px) spacing with default mini unit
Source code
$carbon--spacing-07: carbon--mini-units(4);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-07
2.5rem (40px) spacing with default mini unit
Source code
$carbon--spacing-08: carbon--mini-units(5);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-08
3rem (48px) spacing with default mini unit
Source code
$carbon--spacing-09: carbon--mini-units(6);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-09
4rem (64px) spacing with default mini unit
Source code
$carbon--spacing-10: carbon--mini-units(8);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-10
5rem (80px) spacing with default mini unit
Source code
$carbon--spacing-11: carbon--mini-units(10);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-11
6rem (96px) spacing with default mini unit
Source code
$carbon--spacing-12: carbon--mini-units(12);
- Group: @carbon/layout
- Type:
Number
- Aliased:
spacing-12
All spacing increments in a map
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:
Map
Source code
$spacing-01: $carbon--spacing-01;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-01
Source code
$spacing-02: $carbon--spacing-02;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-02
Source code
$spacing-03: $carbon--spacing-03;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-03
Source code
$spacing-04: $carbon--spacing-04;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-04
Source code
$spacing-05: $carbon--spacing-05;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-05
Source code
$spacing-06: $carbon--spacing-06;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-06
Source code
$spacing-07: $carbon--spacing-07;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-07
Source code
$spacing-08: $carbon--spacing-08;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-08
Source code
$spacing-09: $carbon--spacing-09;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-09
Source code
$spacing-10: $carbon--spacing-10;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-10
Source code
$spacing-11: $carbon--spacing-11;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-11
Source code
$spacing-12: $carbon--spacing-12;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--spacing-12
1rem (16px) layout with default mini unit
Source code
$carbon--layout-01: carbon--mini-units(2);
- Group: @carbon/layout
- Type:
Number
- Aliased:
layout-01
1.5rem (24px) layout with default mini unit
Source code
$carbon--layout-02: carbon--mini-units(3);
- Group: @carbon/layout
- Type:
Number
- Aliased:
layout-02
2rem (32px) layout with default mini unit
Source code
$carbon--layout-03: carbon--mini-units(4);
- Group: @carbon/layout
- Type:
Number
- Aliased:
layout-03
3rem (48px) layout with default mini unit
Source code
$carbon--layout-04: carbon--mini-units(6);
- Group: @carbon/layout
- Type:
Number
- Aliased:
layout-04
4rem (64px) layout with default mini unit
Source code
$carbon--layout-05: carbon--mini-units(8);
- Group: @carbon/layout
- Type:
Number
- Aliased:
layout-05
4rem (96px) layout with default mini unit
Source code
$carbon--layout-06: carbon--mini-units(12);
- Group: @carbon/layout
- Type:
Number
- Aliased:
layout-06
10rem (160px) layout with default mini unit
Source code
$carbon--layout-07: carbon--mini-units(20);
- Group: @carbon/layout
- Type:
Number
- Aliased:
layout-07
All layout increments in a map
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:
Map
Source code
$layout-01: $carbon--layout-01;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--layout-01
Source code
$layout-02: $carbon--layout-02;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--layout-02
Source code
$layout-03: $carbon--layout-03;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--layout-03
Source code
$layout-04: $carbon--layout-04;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--layout-04
Source code
$layout-05: $carbon--layout-05;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--layout-05
Source code
$layout-06: $carbon--layout-06;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--layout-06
Source code
$layout-07: $carbon--layout-07;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--layout-07
0vw fluid spacing
Source code
$carbon--fluid-spacing-01: 0;
- Group: @carbon/layout
- Type:
Number
- Aliased:
fluid-spacing-01
2vw fluid spacing
Source code
$carbon--fluid-spacing-02: 2vw;
- Group: @carbon/layout
- Type:
Number
- Aliased:
fluid-spacing-02
5vw fluid spacing
Source code
$carbon--fluid-spacing-03: 5vw;
- Group: @carbon/layout
- Type:
Number
- Aliased:
fluid-spacing-03
10vw fluid spacing
Source code
$carbon--fluid-spacing-04: 10vw;
- Group: @carbon/layout
- Type:
Number
- Aliased:
fluid-spacing-04
All fluid spacing increments in a map
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:
Map
Source code
$fluid-spacing-01: $carbon--fluid-spacing-01;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--fluid-spacing-01
Source code
$fluid-spacing-02: $carbon--fluid-spacing-02;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--fluid-spacing-02
Source code
$fluid-spacing-03: $carbon--fluid-spacing-03;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--fluid-spacing-03
Source code
$fluid-spacing-04: $carbon--fluid-spacing-04;
- Group: @carbon/layout
- Type:
Number
- Alias:
carbon--fluid-spacing-04
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
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:
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: