From 3a26a7c90481c5e11dea660df2df9cf5ed012d9f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Jul 2026 20:42:52 -0700 Subject: [PATCH 1/6] Consolidate font-weight variables into a $font-weights Sass map Individual $font-weight-lighter/light/normal/medium/semibold/bold/bolder variables made it easy to forget one when adding a new weight and kept the values duplicated across _config.scss, _root.scss, and the utilities API. Move them into a single $font-weights map so --font-weight-* tokens and the fw-* utilities are generated from one source, matching the pattern already used for $font-sizes. --- scss/_config.scss | 22 +++++++++---------- scss/_menu.scss | 2 +- scss/_nav.scss | 2 +- scss/_root.scss | 19 +++++++--------- scss/_utilities.scss | 12 +++------- site/src/content/docs/guides/migration.mdx | 2 ++ .../content/docs/utilities/font-weight.mdx | 22 ++++++------------- 7 files changed, 33 insertions(+), 48 deletions(-) diff --git a/scss/_config.scss b/scss/_config.scss index 7625e71e33af..280efe341046 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -265,21 +265,21 @@ $aspect-ratios: ( // // Font, line-height, and color for body text, headings, and more. -// scss-docs-start font-variables -$font-weight-lighter: lighter !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-medium: 500 !default; -$font-weight-semibold: 600 !default; -$font-weight-bold: 700 !default; -$font-weight-bolder: bolder !default; - -$font-weight-base: $font-weight-normal !default; +// scss-docs-start font-weights +$font-weights: ( + lighter: lighter, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + bolder: bolder +) !default; +// scss-docs-end font-weights $line-height-base: 1.5 !default; $line-height-sm: 1.25 !default; $line-height-lg: 2 !default; -// scss-docs-end font-variables // scss-docs-start font-sizes $font-sizes: () !default; diff --git a/scss/_menu.scss b/scss/_menu.scss index 31c7853d328e..7dba484b6bf2 100644 --- a/scss/_menu.scss +++ b/scss/_menu.scss @@ -180,7 +180,7 @@ $menu-tokens: defaults( } &.selected { - font-weight: $font-weight-semibold; + font-weight: var(--font-weight-semibold); } &.disabled, diff --git a/scss/_nav.scss b/scss/_nav.scss index 90ac39d021b8..257576ab115f 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -240,7 +240,7 @@ $nav-underline-tokens: defaults( .nav-link.active, .show > .nav-link { - font-weight: $font-weight-bold; + font-weight: var(--font-weight-bold); color: var(--nav-underline-link-active-color); border-block-end-color: currentcolor; } diff --git a/scss/_root.scss b/scss/_root.scss index fb0bc40c00e5..27e11f1bc107 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -19,20 +19,10 @@ $root-tokens: defaults( --gradient: #{$gradient}, - // scss-docs-start root-font-weight-variables - --font-weight-lighter: lighter, - --font-weight-light: 300, - --font-weight-normal: 400, - --font-weight-medium: 500, - --font-weight-semibold: 600, - --font-weight-bold: 700, - --font-weight-bolder: bolder, - // scss-docs-end root-font-weight-variables - // scss-docs-start root-body-variables --body-font-family: system-ui, --body-font-size: var(--font-size-base), - --body-font-weight: #{$font-weight-base}, + --body-font-weight: var(--font-weight-normal), --body-line-height: #{$line-height-base}, --heading-color: #{$headings-color}, @@ -125,6 +115,13 @@ $root-tokens: defaults( } // scss-docs-end root-font-size-loop +// scss-docs-start root-font-weight-loop +// Generate font-weight tokens +@each $name, $value in $font-weights { + $root-tokens: map.set($root-tokens, --font-weight-#{$name}, $value); +} +// scss-docs-end root-font-weight-loop + // scss-docs-start root-theme-tokens // Generate semantic theme colors @each $color-name, $color-map in $theme-colors { diff --git a/scss/_utilities.scss b/scss/_utilities.scss index c35881132e59..d5cf26e489d7 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -689,19 +689,13 @@ $utilities: map.merge( class: fst, values: italic normal ), + // scss-docs-start utils-font-weight "font-weight": ( property: font-weight, class: fw, - values: ( - lighter: $font-weight-lighter, - light: $font-weight-light, - normal: $font-weight-normal, - medium: $font-weight-medium, - semibold: $font-weight-semibold, - bold: $font-weight-bold, - bolder: $font-weight-bolder - ) + values: $font-weights ), + // scss-docs-end utils-font-weight "line-height": ( property: line-height, class: lh, diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx index e2fc39f79333..92512568b939 100644 --- a/site/src/content/docs/guides/migration.mdx +++ b/site/src/content/docs/guides/migration.mdx @@ -413,6 +413,8 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb | — | — | `.fs-6xl` | `clamp(3.75rem, …, 5rem)` | +- **Font weights consolidated into a `$font-weights` Sass map.** Removed the individual `$font-weight-lighter`, `$font-weight-light`, `$font-weight-normal`, `$font-weight-medium`, `$font-weight-semibold`, `$font-weight-bold`, and `$font-weight-bolder` variables in favor of a single `$font-weights` map (keys: `lighter`, `light`, `normal`, `medium`, `semibold`, `bold`, `bolder`)—see [Font weight]([[docsref:/utilities/font-weight]]). `--font-weight-*` CSS custom properties are generated from this map instead of being hardcoded in `$root-tokens`. `$font-weight-base` was replaced by `--bs-font-weight-normal`. + - **Removed `.display-1`–`.display-6` heading utilities.** The display heading classes no longer exist and have no single-class replacement. Recreate them by pairing a large font-size utility with a weight utility. v5's display headings used `font-weight: 300`, so `.fw-light` reproduces the original look; use a heavier weight (`.fw-semibold`, `.fw-bold`) if you prefer: diff --git a/site/src/content/docs/utilities/font-weight.mdx b/site/src/content/docs/utilities/font-weight.mdx index 84c1397fe55a..ea899e148c4e 100644 --- a/site/src/content/docs/utilities/font-weight.mdx +++ b/site/src/content/docs/utilities/font-weight.mdx @@ -22,22 +22,14 @@ Quickly change the `font-weight` of text with these utilities. `font-weight` uti ## CSS +### Sass map + +Font weights are defined in the `$font-weights` map in `scss/_config.scss`. CSS custom properties (`--font-weight-*`) are generated from this map in `scss/_root.scss`, and the same map powers the Sass utilities API below. + + + ### Sass utilities API Font weight utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]]) -```scss -"font-weight": ( - property: font-weight, - class: fw, - values: ( - lighter: $font-weight-lighter, - light: $font-weight-light, - normal: $font-weight-normal, - medium: $font-weight-medium, - semibold: $font-weight-semibold, - bold: $font-weight-bold, - bolder: $font-weight-bolder - ) -), -``` + From ce25703692890068d8db29ab0077e616188df9af Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Jul 2026 20:43:53 -0700 Subject: [PATCH 2/6] Replace line-height Sass variables with CSS custom properties $line-height-base/sm/lg duplicated values already exposed as --line-height-* tokens (generated from $font-sizes). Point the line-height utilities and --body-line-height at the CSS variables instead of the Sass variables so there's one source of truth and runtime overrides of --line-height-* also affect the utility classes. --- scss/_config.scss | 4 ---- scss/_root.scss | 2 +- scss/_utilities.scss | 6 +++--- site/src/content/docs/utilities/line-height.mdx | 6 +++--- 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/scss/_config.scss b/scss/_config.scss index 280efe341046..c989f5730057 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -277,10 +277,6 @@ $font-weights: ( ) !default; // scss-docs-end font-weights -$line-height-base: 1.5 !default; -$line-height-sm: 1.25 !default; -$line-height-lg: 2 !default; - // scss-docs-start font-sizes $font-sizes: () !default; // stylelint-disable-next-line scss/dollar-variable-default diff --git a/scss/_root.scss b/scss/_root.scss index 27e11f1bc107..6da3f52863d6 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -23,7 +23,7 @@ $root-tokens: defaults( --body-font-family: system-ui, --body-font-size: var(--font-size-base), --body-font-weight: var(--font-weight-normal), - --body-line-height: #{$line-height-base}, + --body-line-height: var(--line-height-base), --heading-color: #{$headings-color}, diff --git a/scss/_utilities.scss b/scss/_utilities.scss index d5cf26e489d7..57240f7ecf90 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -701,9 +701,9 @@ $utilities: map.merge( class: lh, values: ( 1: 1, - sm: $line-height-sm, - base: $line-height-base, - lg: $line-height-lg, + sm: var(--line-height-sm), + base: var(--line-height-base), + lg: var(--line-height-lg), ) ), "text-align": ( diff --git a/site/src/content/docs/utilities/line-height.mdx b/site/src/content/docs/utilities/line-height.mdx index db75b04b9ffc..efd16ca94e57 100644 --- a/site/src/content/docs/utilities/line-height.mdx +++ b/site/src/content/docs/utilities/line-height.mdx @@ -29,9 +29,9 @@ Line height utilities are declared in our utilities API in `scss/_utilities.scss class: lh, values: ( 1: 1, - sm: $line-height-sm, - base: $line-height-base, - lg: $line-height-lg, + sm: var(--line-height-sm), + base: var(--line-height-base), + lg: var(--line-height-lg), ) ), ``` From 6e04658f22726e9afb1e9a5c77a314019b2ff7f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Jul 2026 20:44:33 -0700 Subject: [PATCH 3/6] Remove $headings-color Sass variable It was the last Sass variable left in the heading/type system after the rest moved to CSS custom properties, and it only ever had one value (inherit). Hardcode --heading-color: inherit directly in $root-tokens instead so headings customization is fully CSS-variable driven, matching paragraphs, lists, and legend. --- scss/_alert.scss | 2 +- scss/_config.scss | 4 ---- scss/_popover.scss | 2 +- scss/_root.scss | 2 +- site/src/content/docs/content/typography.mdx | 6 ------ site/src/content/docs/guides/migration.mdx | 2 +- 6 files changed, 4 insertions(+), 14 deletions(-) diff --git a/scss/_alert.scss b/scss/_alert.scss index 10077c8b98aa..7305ec36793a 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -43,7 +43,7 @@ $alert-tokens: defaults( } .alert-heading { - // Specified to prevent conflicts of changing $headings-color + // Specified to prevent conflicts of changing --heading-color color: inherit; } diff --git a/scss/_config.scss b/scss/_config.scss index c989f5730057..702c91428d9e 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -327,10 +327,6 @@ $font-sizes: defaults( ); // scss-docs-end font-sizes -// scss-docs-start headings-variables -$headings-color: inherit !default; -// scss-docs-end headings-variables - // Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view diff --git a/scss/_popover.scss b/scss/_popover.scss index 0060ff3ce4df..cb18beeae9b9 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -23,7 +23,7 @@ $popover-tokens: defaults( --popover-header-padding-x: var(--spacer), --popover-header-padding-y: var(--spacer-3), --popover-header-font-size: var(--font-size-sm), - --popover-header-color: #{$headings-color}, + --popover-header-color: inherit, --popover-header-bg: var(--bg-1), --popover-body-padding-x: var(--spacer), --popover-body-padding-y: var(--spacer-3), diff --git a/scss/_root.scss b/scss/_root.scss index 6da3f52863d6..addad11edf6a 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -25,7 +25,7 @@ $root-tokens: defaults( --body-font-weight: var(--font-weight-normal), --body-line-height: var(--line-height-base), - --heading-color: #{$headings-color}, + --heading-color: inherit, --hr-border-color: var(--border-color), diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx index e137197a4d18..593eb652696a 100644 --- a/site/src/content/docs/content/typography.mdx +++ b/site/src/content/docs/content/typography.mdx @@ -267,12 +267,6 @@ Headings, paragraphs, description lists, and `` elements—covered here -### Sass variables - -Headings also have a dedicated Sass variable for their `color`. - - - ### Sass maps The `$font-sizes` map in `_config.scss` defines Bootstrap’s type scale. Each key (e.g., `xs`, `md`, `3xl`) holds a nested map with `font-size` and `line-height` values. Larger sizes use `clamp()` for responsive scaling. diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx index 92512568b939..908153ddbd94 100644 --- a/site/src/content/docs/guides/migration.mdx +++ b/site/src/content/docs/guides/migration.mdx @@ -300,7 +300,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb - Relocated heading classes (like `.h1`) and some type classes (`.mark`, `.small`, and `.initialism`) to Reboot from `_type.scss`. This avoids a dependency in Sass modules and we like to avoid extending selectors in general. - **Split the remaining `_type.scss` into `_lists.scss` and `_blockquote.scss`.** Update any individual `@use "bootstrap/scss/content/type"` imports to `content/lists` and/or `content/blockquote` instead. -- **Headings, paragraphs, description lists, and `` now use CSS variables instead of Sass variables.** Removed `$headings-margin-bottom`, `$headings-font-family`, `$headings-font-style`, `$headings-font-weight`, `$headings-line-height`, `$paragraph-margin-bottom`, `$legend-margin-bottom`, `$legend-font-size`, `$legend-font-weight`, and `$dt-font-weight`. Customize the equivalent `--heading-*`, `--paragraph-margin-bottom`, and `--legend-*` CSS variables at runtime instead—see [Typography]([[docsref:/content/typography]]). `$headings-color` is the only Sass variable that remains. +- **Headings, paragraphs, description lists, and `` now use CSS variables instead of Sass variables.** Removed `$headings-margin-bottom`, `$headings-font-family`, `$headings-font-style`, `$headings-font-weight`, `$headings-line-height`, `$headings-color`, `$paragraph-margin-bottom`, `$legend-margin-bottom`, `$legend-font-size`, `$legend-font-weight`, and `$dt-font-weight`. Customize the equivalent `--heading-*`, `--paragraph-margin-bottom`, and `--legend-*` CSS variables at runtime instead—see [Typography]([[docsref:/content/typography]]). - Heading and `
` font-weight now fall back to shared weight tokens (`font-weight: var(--heading-font-weight, var(--font-weight-medium))`, `var(--dt-font-weight, var(--font-weight-bold))`) instead of a hardcoded value, so you can override either the component-specific token or the shared one. - Added `--link-underline-offset` to `$root-tokens` (mirroring `$link-underline-offset`) for runtime customization of the link underline offset. - Reboot and content spacing—`address`, lists, `dd`, `blockquote`, `pre`, `figure`, `caption`, `kbd` padding, and `ol`/`ul` `padding-inline-start` (now driven by a new `--list-padding-x` token)—now derive from the `--spacer-*` scale instead of hardcoded `rem` values. Visual output is unchanged. From 4dbba6a41ec78fb1c380824c902a0cd43f49f559 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Jul 2026 20:45:12 -0700 Subject: [PATCH 4/6] Remove $link-decoration and $link-underline-offset Sass variables Both had a single fixed value and existed only to be interpolated into --link-decoration and --link-underline-offset once, in $root-tokens. Hardcode the values there directly instead, simplify the list-group item's text-decoration to plain `none` (it no longer needs to branch on $link-decoration), and drop the stray commented-out $enable-negative-margins default and leftover dead comments in Reboot. --- scss/_config.scss | 8 -------- scss/_list-group.scss | 3 +-- scss/_root.scss | 4 ++-- scss/content/_reboot.scss | 2 -- 4 files changed, 3 insertions(+), 14 deletions(-) diff --git a/scss/_config.scss b/scss/_config.scss index 702c91428d9e..7536d103aaa5 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -36,7 +36,6 @@ $enable-grid-classes: true !default; $enable-container-classes: true !default; $enable-cssgrid: true !default; $enable-button-pointers: true !default; -// $enable-negative-margins: false !default; $enable-deprecation-messages: true !default; $color-mode-type: "media-query" !default; @@ -171,13 +170,6 @@ $position-values: ( ) !default; // scss-docs-end position-map -// Links -// -// Style anchor elements. - -$link-decoration: underline !default; -$link-underline-offset: .2em !default; - $stretched-link-pseudo-element: after !default; $stretched-link-z-index: 1 !default; diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 6860abd7d543..92aaa19dab9c 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -65,8 +65,7 @@ $list-group-tokens: defaults( display: block; padding: var(--list-group-item-padding-y) var(--list-group-item-padding-x); color: var(--theme-fg, var(--list-group-color)); - // stylelint-disable-next-line scss/at-function-named-arguments - text-decoration: if(sass($link-decoration == none): null); + text-decoration: none; background-color: var(--theme-bg-subtle, var(--list-group-bg)); border: var(--list-group-border-width) solid var(--theme-border, var(--list-group-border-color)); diff --git a/scss/_root.scss b/scss/_root.scss index addad11edf6a..b73ba86db8f5 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -30,8 +30,8 @@ $root-tokens: defaults( --hr-border-color: var(--border-color), --link-color: light-dark(var(--primary-base), var(--primary-fg)), - --link-decoration: #{$link-decoration}, - --link-underline-offset: #{$link-underline-offset}, + --link-decoration: underline, + --link-underline-offset: .2em, --link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000), --font-mono: "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;", diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index a37eacab4cc2..89243c8a77a8 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -311,8 +311,6 @@ $reboot-mark-tokens: defaults( text-underline-offset: var(--link-underline-offset); &:hover { - // --link-color: var(--link-hover-color); - // --link-decoration: var(--link-hover-decoration, var(--link-decoration)); color: var(--theme-fg-emphasis, var(--link-hover-color)); text-decoration: var(--link-hover-decoration, var(--link-decoration)); } From 0cbd0849c001ead06b5a107d7da4a8d5d18ee036 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Jul 2026 20:47:48 -0700 Subject: [PATCH 5/6] Config: remove orphaned Typography comment header, fix spacing --- scss/_config.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/scss/_config.scss b/scss/_config.scss index 7536d103aaa5..a86d9df596fa 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -170,6 +170,7 @@ $position-values: ( ) !default; // scss-docs-end position-map + $stretched-link-pseudo-element: after !default; $stretched-link-z-index: 1 !default; @@ -253,10 +254,6 @@ $aspect-ratios: ( ) !default; // scss-docs-end aspect-ratios -// Typography -// -// Font, line-height, and color for body text, headings, and more. - // scss-docs-start font-weights $font-weights: ( lighter: lighter, From 0e2c036c1ee07ebde32b2f5e4ab779b88e9bb065 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Jul 2026 20:48:22 -0700 Subject: [PATCH 6/6] Move transition variables into component tokens $transition-fade and $transition-collapse/$transition-collapse-width lived in _config.scss like other component tokens used to before the tokens migration, but .fade and .collapsing never picked up the --fade-*/--collapse-* token treatment. Give them their own $fade-tokens and $collapse-tokens (via defaults()) in _transitions.scss so --transition-fade, --transition-collapse, and --transition-collapse-width are runtime-customizable CSS variables like the rest of the component tokens. $transition-base moves into mixins/_transition.scss, next to the mixin that uses it as a fallback. --- scss/_config.scss | 8 ----- scss/_transitions.scss | 32 ++++++++++++++++--- scss/mixins/_transition.scss | 2 ++ site/src/content/docs/components/collapse.mdx | 2 +- 4 files changed, 31 insertions(+), 13 deletions(-) diff --git a/scss/_config.scss b/scss/_config.scss index a86d9df596fa..73e5fe327409 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -236,14 +236,6 @@ $shadows: ( ) !default; // scss-docs-end box-shadow-variables -$transition-base: all .2s ease-in-out !default; -$transition-fade: opacity .15s linear !default; - -// scss-docs-start collapse-transition -$transition-collapse: height .35s ease !default; -$transition-collapse-width: width .35s ease !default; -// scss-docs-end collapse-transition - // scss-docs-start aspect-ratios $aspect-ratios: ( "auto": auto, diff --git a/scss/_transitions.scss b/scss/_transitions.scss index 3a7f936bc706..ad6779ecb0e6 100644 --- a/scss/_transitions.scss +++ b/scss/_transitions.scss @@ -1,8 +1,31 @@ -@use "config" as *; +@use "functions" as *; +@use "mixins/tokens" as *; @use "mixins/transition" as *; +$fade-tokens: () !default; +$collapse-tokens: () !default; + +// stylelint-disable scss/dollar-variable-default +$fade-tokens: defaults( + ( + --transition-fade: opacity .15s linear, + ), + $fade-tokens +); + +// scss-docs-start collapse-transition +$collapse-tokens: defaults( + ( + --transition-collapse: height .35s ease, + --transition-collapse-width: width .35s ease, + ), + $collapse-tokens +); +// scss-docs-end collapse-transition + .fade { - @include transition($transition-fade); + @include tokens($fade-tokens); + @include transition(var(--transition-fade)); &:not(.show) { opacity: 0; @@ -17,14 +40,15 @@ } .collapsing { + @include tokens($collapse-tokens); height: 0; overflow: hidden; - @include transition($transition-collapse); + @include transition(var(--transition-collapse)); &.collapse-horizontal { width: 0; height: auto; - @include transition($transition-collapse-width); + @include transition(var(--transition-collapse-width)); } } // scss-docs-end collapse-classes diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss index c9f2ca413791..dfcd9eb6b5b7 100644 --- a/scss/mixins/_transition.scss +++ b/scss/mixins/_transition.scss @@ -1,6 +1,8 @@ @use "sass:list"; @use "../config" as *; +$transition-base: all .2s ease-in-out !default; + // stylelint-disable property-disallowed-list @mixin transition($transition...) { @if list.length($transition) == 0 { diff --git a/site/src/content/docs/components/collapse.mdx b/site/src/content/docs/components/collapse.mdx index 09c4db836411..90e2cf60570a 100644 --- a/site/src/content/docs/components/collapse.mdx +++ b/site/src/content/docs/components/collapse.mdx @@ -96,7 +96,7 @@ Note that Bootstrap’s current implementation does not cover the various *optio ### Sass variables - + ### Classes