& {
  // Custom variable values only support SassScript inside `#{}`

  // Body
  --body-bg: #{$body-bg};
  --body-color: #{$body-color};

  // Breakpoints
  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  // Borders
  --border-width: #{$border-width};
  --border-color: #{$border-color};
  --border-radius-sm: #{$border-radius-sm};
  --border-radius: #{$border-radius};
  --border-radius-lg: #{$border-radius-lg};
  --rounded-pill: #{$rounded-pill};

  // Shadows
  --box-shadow-sm: #{$box-shadow-sm};
  --box-shadow: #{$box-shadow};
  --box-shadow-lg: #{$box-shadow-lg};

  // Spacing
  @each $size, $length in $spacers {
    @if $size > 0 {
      --spacer-#{$size}: #{$length};
    }
  }

  // Typography

  --text-muted: #{$text-muted};

  --font-light: #{$font-weight-light};
  --font-normal: #{$font-weight-normal};
  --font-headings: #{$headings-font-weight};
  --font-bold: #{$font-weight-bold};

  --line-height: #{$line-height-base};
  --line-height-lg: #{$line-height-lg};
  --line-height-sm: #{$line-height-sm};

  --font-size: #{$font-size-base};
  --font-size-lg: #{$font-size-lg};
  --font-size-sm: #{$font-size-sm};

  --h1: #{$h1-font-size};
  --h2: #{$h2-font-size};
  --h3: #{$h3-font-size};
  --h4: #{$h4-font-size};
  --h5: #{$h5-font-size};
  --h6: #{$h6-font-size};

  // Use `inspect` for lists so that quoted items keep the quotes
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}