Gap

The ds-gap function allows you to retrieve spacing values from the design system’s gap scale.

This scale is particularly useful for defining the space between items in a layout, ensuring a consistent and visually appealing distribution of elements.

Using the ds-gap function in SCSS

The ds-gap($index) function accepts an index from 0 to 8, returning the corresponding value from the gap scale. This function is especially useful in grid or flexbox layouts where consistent spacing between items is essential.

Gap values

Example usage:

SCSS code

                                                        
                                                        
                                                            /* Set the gap to gap unit 1 */
                                                        .c-layout { 
                                                            gap: ds-gap("1");
                                                        }
                                                        
                                                            

Generated CSS

                                                        
                                                        
                                                            /* Set the gap to gap unit 1 */
                                                        .c-layout { 
                                                            gap: var(--ds-gap-1); // 2px
                                                        }