{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/20548","repository_url":"https://api.github.com/repos/twbs/bootstrap","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/20548/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/20548/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/20548/events","html_url":"https://github.com/twbs/bootstrap/issues/20548","id":172281738,"number":20548,"title":"v4: mixins/_breakpoints.scss does not compile with custom $grid-breakpoints","user":{"login":"sebroeder","id":242991,"avatar_url":"https://avatars.githubusercontent.com/u/242991?v=3","gravatar_id":"","url":"https://api.github.com/users/sebroeder","html_url":"https://github.com/sebroeder","followers_url":"https://api.github.com/users/sebroeder/followers","following_url":"https://api.github.com/users/sebroeder/following{/other_user}","gists_url":"https://api.github.com/users/sebroeder/gists{/gist_id}","starred_url":"https://api.github.com/users/sebroeder/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebroeder/subscriptions","organizations_url":"https://api.github.com/users/sebroeder/orgs","repos_url":"https://api.github.com/users/sebroeder/repos","events_url":"https://api.github.com/users/sebroeder/events{/privacy}","received_events_url":"https://api.github.com/users/sebroeder/received_events","type":"User","site_admin":false},"labels":[{"id":210556,"url":"https://api.github.com/repos/twbs/bootstrap/labels/css","name":"css","color":"563d7c","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-08-20T17:36:12Z","updated_at":"2016-11-30T08:37:40Z","closed_at":"2016-10-27T18:25:26Z","body":"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.\n\nThe problem can be reproduced with the following minimal `_custom.scss`:\n\n``` scss\n// _custom.scss\n//\n// Use custom grid tiers as described in documentation:\n// http://v4-alpha.getbootstrap.com/layout/grid/#grid-tiers.\n// This breaks compilation.\n\n$grid-breakpoints: (\n  sm: 480px,\n  md: 768px,\n  lg: 1024px\n);\n```\n\nThe error messages from a Rails 5 app using the `bootstrap` gem version `v4.0.0.alpha3.1` are:\n\n```\nInvalid null operation: \"null lt 4\".\nbootstrap (4.0.0.alpha3.1) assets/stylesheets/bootstrap/mixins/_breakpoints.scss:19:in `media-breakpoint-down'\nbootstrap (4.0.0.alpha3.1) assets/stylesheets/bootstrap/_navbar.scss:221\nbootstrap (4.0.0.alpha3.1) assets/stylesheets/_bootstrap.scss:34\n```\n\nThe 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:\n\n```\nRunning \"sass:core\" (sass) task\n>> Error: Undefined operation: \"null lt 3\".\n>>         on line 19 of scss/mixins/_breakpoints.scss\n>> >>   @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), n\n>>    -------------^\nWarning:  Use --force to continue.\n\nAborted due to warnings.\n```\n\nThe following functions are called, starting at line 221 of `_navbar.scss`, before the error occurs:\n- `@include media-breakpoint-down(xs)`\n- `breakpoint-max(xs)`\n- `breakpoint-next(xs)`:\n  \n  ``` scss\n  @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n      $n: index($breakpoint-names, $name);\n      @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n  }\n  ```\n  \n  Here the `null` comparison happens since `xs` is not in `$grid-breakpoints` and thus `$n` is `null`.\n\nI 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.\n\nShould 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:\n- `_card.scss`  (4 usages)\n- `_carousel.scss`  (1 usage found)\n- `_forms.scss`  (1 usage found)\n- `_jumbotron.scss`  (1 usage found)\n- `_modal.scss`  (2 usages found)\n- `_navbar.scss`  (10 usages found)\n- `_breakpoints.scss`  (4 usages found)\n- `_grid-framework.scss`  (1 usage found)\n- `_grid.scss`  (1 usage found)\n- `_flex.scss`  (4 usages found)\n- `_pulls.scss`  (1 usage found)\n- `_text.scss`  (1 usage found)\n- `_visibility.scss`  (2 usages found)\n\nDepending 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.\n"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/263814320","html_url":"https://github.com/twbs/bootstrap/issues/20548#issuecomment-263814320","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/20548","id":263814320,"user":{"login":"almai","id":402692,"avatar_url":"https://avatars.githubusercontent.com/u/402692?v=3","gravatar_id":"","url":"https://api.github.com/users/almai","html_url":"https://github.com/almai","followers_url":"https://api.github.com/users/almai/followers","following_url":"https://api.github.com/users/almai/following{/other_user}","gists_url":"https://api.github.com/users/almai/gists{/gist_id}","starred_url":"https://api.github.com/users/almai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/almai/subscriptions","organizations_url":"https://api.github.com/users/almai/orgs","repos_url":"https://api.github.com/users/almai/repos","events_url":"https://api.github.com/users/almai/events{/privacy}","received_events_url":"https://api.github.com/users/almai/received_events","type":"User","site_admin":false},"created_at":"2016-11-30T08:37:40Z","updated_at":"2016-11-30T08:37:40Z","body":"I ran into the same problem. If there's no solution to this problem, then the documentation should be updated at least."}}
{"actor":{"display_login":"almai"}}