Compilation error when media-breakpoint-only mixin used with custom breakpoints
Created by: RGENT
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
Location: scss/mixins/_breakpoints.scss
Expected:
The media-breakpoint-only
mixin compiles when using a map of breakpoints via the second argument..
Observed:
Compilation fails with the following message:
╷
43 │ @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
│ ^^^^^^^^^^^^^^^^^
╵
node_modules/bootstrap/scss/mixins/_breakpoints.scss 43:47 breakpoint-max()
node_modules/bootstrap/scss/mixins/_breakpoints.scss 112:10 media-breakpoint-only()
src/scss/page--front.scss 3:1 @use
src/scss/global.scss 5:1 root stylesheet
SassError: SassError: Undefined variable.
Impact:
This media-breakpoint-only
doesn't work for custom breakpoints. It's possible to work around this by using:
-
media-breakpoint-down("sm", $custom-breakpoints)
for-only("xs,
(smallest breakpoint); -
media-breakpoint-up("xxl", $custom-breakpoints)
for-only("xxl",
(largest breakpoint); and, -
media-breakpoint-between("sm", "md", $custom-breakpoints)
for-only("sm",
(other breakpoints).
Potential fix:
In the media-breakpoint-only
definition, (scss/mixins/_breakpoints.scss
) replace:
$max: breakpoint-max($next);
with:
$max: breakpoint-max($next, $breakpoints);
Reduced test cases
@use "~bootstrap/scss/mixins/breakpoints";
@include breakpoints.media-breakpoint-only("xs", (xs: 123)) {
.red {
background-color: red;
}
}
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
No response
What version of Bootstrap are you using?
v5.1.1