rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Drop breakpoint CSS custom properties (#29020)

Browse Source 
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.
This commit is contained in:
Mark Otto 2019-07-14 01:44:49 -07:00 committed by XhmikosR
parent 37ec7f6928
commit cdb6504e48
2 changed files with 0 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_root.scss
View File

@ -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)};

27
site/content/docs/4.3/getting-started/theming.md
View File

@ -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 >}}