Skip to content
GitLab

The breakpoint-min() function should return null for the first element

Closed Administrator requested to merge github/fork/zerustech/topic-breakpoints-infix into main

Created by: zerustech

Description

The breakpoint-min() function should return null for the first element in the map, even if its value is not 0. Currently, this function returns null only when the value is 0, so when calling this function with a map other than $grid-breakpoints, such as $container-max-widths, it will return the value of the first element, instead of null.

Also, the scss/_container.sass script directly generates responsive container selectors with .container-#{$breakpoint}, instead of .container#{breakpoint-infix($breakpoint, $container-max-widths)}, so it may generate unnecessary selectors such as .container-xs under certain circumstances.

How to Reproduce

Initialization

$ cd ~
$ mkdir test
$ cd test
$ yarn init -y
$ yarn add --dev sass bootstrap

Create a Test File

Create test.scss with the following content:

// test.scss
@import "node_modules/bootstrap/scss/functions";                                                                         
$container-max-widths: (                                                                                                 
  xs: 540px,                                                                                                             
  sm: 540px,                                                                                                             
  md: 720px,                                                                                                             
  lg: 960px,                                                                                                             
  xl: 992px,                                                                                                             
  xxl: 992px                                                                                                             
);                                                                                                                       
@import "node_modules/bootstrap/scss/variables";                                                                         
@import "node_modules/bootstrap/scss/mixins";                                                                            
@import "node_modules/bootstrap/scss/containers";                                                                        
@import "node_modules/bootstrap/scss/navbar";

Test

$ yarn sass test.scss test.css

You should be able to find a few selectors that include .container-xs in test.css, which is incorrect because any presence of .container-xs should have been replaced by .container.