Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

It is not possible to properly set $link-color variable in user-land config. #27338

Closed
dilame opened this issue Sep 29, 2018 · 8 comments
Closed

Comments

@dilame
Copy link

dilame commented Sep 29, 2018

In your _variables.scss

$link-color:                theme-color("primary") !default;

Your docs (https://getbootstrap.com/docs/4.1/getting-started/theming/#variable-defaults) says

However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

But it is impossible to just change $key for theme-color() function, before import _variables.scss, because theme-color expects $theme-colors that declared in _variables.scss.
It turns out a vicious circle.
I know i can just use a variable instead of function call, but it is a bit confusing. Why you use theme-color("primary") instead of just $primary?

@XhmikosR
Copy link
Member

@MartijnCuppens can you confirm?

@MartijnCuppens
Copy link
Member

The theme-color function is a bit redundant indeed. I will check to what extent we can simplify this.

@MartijnCuppens
Copy link
Member

MartijnCuppens commented Sep 29, 2018

In my opinion we can deprecate the theme-color, gray, color functions. The color and gray functions are not used by Bootstrap and it's easy to remove the theme-color dependency.

@mdo, what do you think?

@mdo
Copy link
Member

mdo commented Oct 6, 2018

We could potentially remove those come v5? The maps are primarily meant for looping over, but I'm unsure how much we rely on the functions we introduced with them.

@retan
Copy link

retan commented Oct 8, 2018

Using $primary here is not an option either.
This code

$link-color:                $primary;

Throws an error: Error: Undefined variable: "$primary".
It's the same problem. If the custom _variables.scss is included before bootstrap, the SASS won't let you use undefined variable.

@dilame
Copy link
Author

dilame commented Oct 8, 2018

I define $primary in my own variables.scss, and it is not dirty.
But define the whole $theme-colors map and include functions just to redefine $link-color is redundant.

@retan
Copy link

retan commented Oct 8, 2018

Of course typically you would define your own value for $primary. But the same problem occurs with many other variables. Eg. I wanted to assign $body-color: $gray-700 (instead the default $gray-900). To do that I need to declare that $gray-700 variable in my file (though I want it to have te same value as the defaults).
I think at least the docs should clarify this.

@flexjoly
Copy link

flexjoly commented Oct 17, 2018

I dont like to see these functions to disappear. Because then we need to make a separate variable for each color.
We just adopted the method of using the functions for colors and not the variables. We add colors to the maps, without making a separate var for it.

We dont use the theme-color function.... I mapped the theme-colors with the colors. So we just use color() and gray().

I found this discussion because I wanted to ask if gray() could be changed so it would accept integers and strings both. Like: gray('100') and gray(100). At the moment gray(100) returns null :-(

So please keep gray() and color(). Although if they are removed, I will add them via our own sass-functions.
What if bootstrap removes the separate vars and uses the functions? Seems more DRY to me.

Greetz, flexjoly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants