diff options
| author | Mark Otto <otto@github.com> | 2019-07-14 11:44:49 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2019-07-14 11:44:49 +0300 |
| commit | cdb6504e4803538e28a251a7f9634df2d580cd3e (patch) | |
| tree | 502d3068b81c419075808bd8e2815ea627fd589e | |
| parent | 37ec7f6928ac2b7e1a8846d39948b099b7f3fd25 (diff) | |
Drop breakpoint CSS custom properties (#29020)
Media queries do not support CSS custom properties (CSS variables), so we've had some useless variables lying around since shipping v4. This finally removes them and the associated documentation content that explained the situation.
Fixes #29012.
| -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 ad550df3b4..055ac32fb0 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 227f32bbf6..df12851ff6 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 >}} |