Bootstrap (as of 2025) scss variables
I tried figuring out how bootstrap's built-in customisation options work in order to add my own eventually.
What I mean are settings like this:
$enable-shadows: false;
When doing a folder search I was actually baffled to only find the variable in _variables.scss and nowhere else. I thought " maybe its hashed, or so ", but strangely I was unable to get behind the scenes or find any connection. nada.
My goal is to add a bit of typography goodness to re-usable site-templates, such as text-wrap, including it as a togglable option instead of a dictating must have. After failing to search the web, I feel like the only person wanting to do that.
How do those toggle variables work … and is my idea even implementable?2 Replies
I’m not very well versed with scss but the talk of toggles I just wanted to share the space toggle hack, which it’s kind of a Boolean flag.
In your example , since $enable-shadows was false any mention of it was probably removed after a check of it inside a mix-in or @if so nothing this controls was compiled in the final css that is output.
I’m sure someone else that knows bootstrap and scss will have a more concise and elegant answer but hopefully that gets you started.
First of all, thanks for your time.
I totally get what you are on about and it made me play around with settings in the file search. I am unsure why, but when using "Scope – All Places" instead of "In Project" or "Directory" I actually am getting results. Bit confused about phpstorm doing that ... was a user error after all, lol
