Rewrote displays type variables to use them as a map

[afanjul]

Rewrited displays type variables to use them as a map so it would be easier to extend and modify.

Fixes #26515.

[XhmikosR]

please fix the test failures.

[afanjul]

please fix the test failures.

Could you check now? I tried to just push the fixes to my own branch but the pull request would never get updated (I don't know if its a github bug or what)... so I pushed to my own fork master... according to github message "Add more commits by pushing to the master branch on afanjul/bootstrap."

It's a bit complicated to just update a pull request... :(

[XhmikosR]

GitHub could have a slowness issue right now, but usually you just push to your branch.

fixed

[MartijnCuppens]

Hi @afanjul,

I'm a bit afraid it's not clear what 300 means here for people who don't have a clue the font weight is set:

bootstrap/scss/_variables.scss

Lines 306 to 309 in 3182990

	1:(6rem, 300),
	2:(5.5rem, 300),
	3:(4.5rem, 300),
	4:(3.5rem, 300)

I did a similar PR once, but closed it since I was a bit worried we're mixing up too many different "styles" of configuration: #26533.

[afanjul]

Hi @afanjul,

I'm a bit afraid it's not clear what 300 means here for people who don't have a clue the font weight is set:
bootstrap/scss/_variables.scss

Lines 306 to 309 in 3182990

1:(6rem, 300),
2:(5.5rem, 300),
3:(4.5rem, 300),
4:(3.5rem, 300)
I did a similar PR once, but closed it since I was a bit worried we're mixing up too many different "styles" of configuration: #26533.

Another alternative (a worse one from my point of view) is simply split it in two maps:

In _variables.scss

$display-sizes: (
  1:6rem,
  2:5.5rem,
  3:4.5rem,
  4:3.5rem
);
$display-weights: (
  1:300,
  2:300,
  3:300,
  4:300
);

The only "issue" is that you have to use the $index in for loop (and maintain a coherence in the maps):

@for $i from 1 through length($display-sizes) {
  $size: nth($display-size, $i);
  $weight: nth($display-weight, $i);
  .display-#{$index} {
    @include font-size($size);
    font-weight: $weight;
    line-height: $display-line-height;
  }
}

But the worst method, for me, is the actual one, with separate values/variables for size and weights. It's ugly and not extendible.

[afanjul]

Anyway, if you are using Sass as a "web developer", I'm assuming that you can read and interpret code, docs, comments in code, functions, etc. Either way, you will be using compiling bootstrap.css and just using de CSS

[afanjul]

For example, what if I want to add another "display-5" in the actual bootstrap version?
I can add a new $spacers or $sizes element, but you don't let me do the same with "$displays"? A bit odd..

[mdo]

I did a similar PR once, but closed it since I was a bit worried we're mixing up too many different "styles" of configuration: #26533.

Reading that thread again @MartijnCuppens, it looks like I punted on it for redoing bigger things in v5. I can't recall exactly what though, but perhaps it was related to your RFS work?

[afanjul]

Now I think that the source code is complete and prettier... Using a map for $display-types, with key value explicit names. So now is pretty easy to modify or extend by the people... Just be aware of the new variable called $display-types for docs, and so...

[XhmikosR]

This needs a rebase + squash

[mdo]

Replaced by #30568.