The ds-size function provides access to the design system's size scale, which is particularly useful for smaller UI elements. This scale includes the most common sizes needed in design, allowing for consistent and scalable components.
Using the ds-size function in SCSS
The ds-size($name) function takes a size index as an input and returns the corresponding pixel value. The index can range from 1 to 22, covering a wide array of sizes.
Size scale reference
Example usage:
SCSS Example
.c-element {
inline-size: ds-size("22");
}
CSS Output
.c-element {
inline-size: 128px;
}