v4: mixins/_breakpoints.scss does not compile with custom $grid-breakpoints
Created by: sebroeder
In Bootstrap 4 when I use custom grid tiers as described in the documentation at http://v4-alpha.getbootstrap.com/layout/grid/#grid-tiers, bootstrap fails to compile to CSS.
The problem can be reproduced with the following minimal _custom.scss
:
// _custom.scss
//
// Use custom grid tiers as described in documentation:
// http://v4-alpha.getbootstrap.com/layout/grid/#grid-tiers.
// This breaks compilation.
$grid-breakpoints: (
sm: 480px,
md: 768px,
lg: 1024px
);
The error messages from a Rails 5 app using the bootstrap
gem version v4.0.0.alpha3.1
are:
Invalid null operation: "null lt 4".
bootstrap (4.0.0.alpha3.1) assets/stylesheets/bootstrap/mixins/_breakpoints.scss:19:in `media-breakpoint-down'
bootstrap (4.0.0.alpha3.1) assets/stylesheets/bootstrap/_navbar.scss:221
bootstrap (4.0.0.alpha3.1) assets/stylesheets/_bootstrap.scss:34
The error messages from a fresh checkout of the v4-dev
git branch, running grunt sass
after following the setup steps in http://v4-alpha.getbootstrap.com/getting-started/build-tools are:
Running "sass:core" (sass) task
>> Error: Undefined operation: "null lt 3".
>> on line 19 of scss/mixins/_breakpoints.scss
>> >> @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), n
>> -------------^
Warning: Use --force to continue.
Aborted due to warnings.
The following functions are called, starting at line 221 of _navbar.scss
, before the error occurs:
-
@include media-breakpoint-down(xs)
-
breakpoint-max(xs)
-
breakpoint-next(xs)
:@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); }
Here the
null
comparison happens sincexs
is not in$grid-breakpoints
and thus$n
isnull
.
I tried to come up with a proposal for a possible solution but there seems no semantically correct way to handle the case of a non-existing breakpoint in breakpoint-next
since a null
return value already has the meaning that the largest breakpoint was reached.
Should the code calling the media-breakpoint-*
mixins test for the existence of the breakpoint it passes in as an argument first? This seems a little bit ugly since it would add many conditionals to the calling code. I found 33 usages of the mixins:
-
_card.scss
(4 usages) -
_carousel.scss
(1 usage found) -
_forms.scss
(1 usage found) -
_jumbotron.scss
(1 usage found) -
_modal.scss
(2 usages found) -
_navbar.scss
(10 usages found) -
_breakpoints.scss
(4 usages found) -
_grid-framework.scss
(1 usage found) -
_grid.scss
(1 usage found) -
_flex.scss
(4 usages found) -
_pulls.scss
(1 usage found) -
_text.scss
(1 usage found) -
_visibility.scss
(2 usages found)
Depending on the difficulty of this issue I could try to work on it, but might need a little bit of mentorship. Let me know what you think.