Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

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 since xs is not in $grid-breakpoints and thus $n is null.

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.