diff options
| -rw-r--r-- | scss/_root.scss | 4 | ||||
| -rw-r--r-- | site/content/docs/4.3/getting-started/theming.md | 27 |
2 files changed, 0 insertions, 31 deletions
diff --git a/scss/_root.scss b/scss/_root.scss index ad550df3b..055ac32fb 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -8,10 +8,6 @@ --#{$color}: #{$value}; } - @each $bp, $value in $grid-breakpoints { - --breakpoint-#{$bp}: #{$value}; - } - // 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)}; diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md index 227f32bbf..df12851ff 100644 --- a/site/content/docs/4.3/getting-started/theming.md +++ b/site/content/docs/4.3/getting-started/theming.md @@ -404,11 +404,6 @@ Here are the variables we include (note that the `:root` is required). They're l --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } @@ -426,25 +421,3 @@ a { color: var(--blue); } {{< /highlight >}} - -### Breakpoint variables - -While we originally included breakpoints in our CSS variables (e.g., `--breakpoint-md`), **these are not supported in media queries**, but they can still be used _within_ rulesets in media queries. These breakpoint variables remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript. [Learn more in the spec](https://www.w3.org/TR/css-variables-1/#using-variables). - -Here's an example of **what's not supported:** - -{{< highlight css >}} -@media (min-width: var(--breakpoint-sm)) { - ... -} -{{< /highlight >}} - -And here's an example of **what is supported:** - -{{< highlight css >}} -@media (min-width: 768px) { - .custom-element { - color: var(--primary); - } -} -{{< /highlight >}} |