Bootstrap 4 custom variables don't cascade down? - css

So here's kind of a weird thing with the custom.scss file in bootstrap that I discovered tonight and wondering if I am missing something. Let's say I set the color $blue to a custom value (#000 in this case just to make it easy to read) and remove the !default flag in _custom.scss as I'm supposed to. In the _variables.scss file, the color $brand-primary is set to $blue, with a !default flag. Then, the $btn-primary-bg is set to $brand-primary, also with a !default flag. So, my thinking is if I set:
$blue: #000000;
in the custom.scss file, it should then cascade down to any variable using $blue, making it so that:
$brand-primary: $blue; set to #000 and then
$btn-primary-bg: $brand-primary; also set to #000000
Well, turns out I have to list all 3 of those instances in the custom sass file and remove their !default flag before they would change to the custom color.
So instead of my custom sheet just having one line
$blue: #000000;
it needs to be
$blue: #000000 ;
$brand-primary: $blue;
$btn-primary-bg: $brand-primary;
before that custom color gets applied to those classes.
Am I missing something here? Shouldn't we just have to set the custom color once and then any variable referencing it would also reference that custom color? Seems inefficient to me at this point.

[enter link description here][1]There is no problem with the variables have been defined. Probably you need to change the way you have used them in HTML. Have a look at below example which has been provided based on your defined variables. I would suggest remove "$blue" variable and define the color directly for "$brand-primary" variable!
[1]: https://jsfiddle.net/negin/t36ep4e8/

Related

Understrap child-theme edit not visible, sass color variable not applied

I'm looking to change the primary theme color applied by $primary in _theme_variables.scss; changed value from default $purple to $orange while npm run watch-bs (browser-sync). Still no change on home page:
My edits:
_theme_variables.scss
$purple: #5533ff; // Thats a sample how you could change a BootStrap variable.
$orange: #fd7e14;
$primary: $orange; // Once we've changed the value, we'll also make it the primary brand color.
_theme.scss:
// This is an empty scss file for your custom styles - Please add your super duper awesome mega design styles here
#import "theme_variables";
What am I missing ? 🤔
Ok, I think I solved this particular issue.
I was able to successfully override $primary value by modifying src/sass/theme/_child_theme_variables.scss.
The earlier mistake was expecting theme changes on editing src/sass/assets/understrap/theme/_theme_variables.scss !!
If anyone can delineate the purpose of _child_theme_variables.scss vs _theme_variables.scss in this context, I'll accept their answer ! 😁

How to modify a parameter's value in sass files from typescript?

I am trying to change a variable's value in "../myStyle.scss" file from myComponent.ts . I read that it is impossible to achieve it because sass file are compiled into css by the sass pre-processor and the variable disapears. Isn't there a way to work this around.
My variable is called $theme.
And I want to change it's value.
$theme: #5A352A;
and I want it to become $theme: #ffffff; when the user clicks
You have to work in a different way.
Basically when you compile the angular app , it will generate a css file where it substitute the variable with the value , wherever you used it.
So if you want to achieve a color change you have to create a other variable and other classes and swipe it in your class attributes (this is one way, check also ngStyle and ngClass in angular reference).
For example white-theme/dark-theme (the most common case).
variables -> $black: #00000; $white: #ffffff
Example classes:
.body-dark {
background-color: $black;
}
.body-white {
background-color: $white;
}
and swipe the classes in the html elements.
setDark(){
document.getElementById("bodyId").setAttribute("class","body-dark ")
}
the same for white.

update sass user defined color variables

I have created an angular component MyComponent that has a sass and the theme file.
mycomponent.component.scss
#import "../styles/common";
#import 'mycomponent.theme';
.element {
color:$primary
}
in the common.scss, I have imported other files likes variables.scss that contain $primary with predefined or default colour and other theme variables.
and in the mycomponent.theme.scss, I defined the #mixin to update the primary variable
#mixin mycomponent-theme() {
$primary: green ;
}
Now the theme file that creates the final theme.css call this #mixin
#include mycomponent-theme();
but the element class's color is not getting updated to the green color as mixin is updating the $primary variable.
Am I making any mistake? Or what is the other way to achieve this?
Update
Here is the codepen https://codepen.io/ermarkar/pen/wygwYp?page=1&
Your issue has to do with scoping.
The $primary variable that you set to the value green in the mixin mycomponent-theme() is a local variable, therefore, it is only visible to the code that is inside that mixin.
Even though it has the same name as another global variable (I assume it is global), they are different variables.
When you wrote:
.element {
color:$primary
}
Sass used the global variable called $primary, whose value your mixin did not change, the mixin created a local variable with the same name.
There is a very good resource that I recommend you to read that helps understand variable scoping in Sass, much better than I can explain here.
UPDATE:
One thing you could do that I just thought of, is use !global. This keyword lets you manipulate variables in the global scope from within function or mixin blocks.
In your case, if you change your mixin to this:
#mixin mycomponent-theme() {
$primary: green !global;
}
Then the mycomponent-theme() mixin will change the global $primary variable.

Less (css) - Can I re-declare a color variable that is referenced in other color definitions?

So let's say I have the following color definitions
#gray-base: #000;
#gray-darker: lighten(#gray-base, 13.5%); // #222
#gray-dark: lighten(#gray-base, 20%); // #333
#gray: lighten(#gray-base, 33.5%); // #555
#gray-light: lighten(#gray-base, 46.7%); // #777
#gray-lighter: lighten(#gray-base, 93.5%); // #eee
If, after the above code, I re-declare #gray-base, will all the other #gray definitions which are based on #gray-base change, or do I have to re-declare them all?
The particular use case I am after, is I want to be able to override bootstrap variables from an external variable.less file, to keep the bootstrap repo untouched to make it easier to update.
I assume, that you have at the beginning of the file your code from above and change somewhere afterwards your #gray-base color. Will all the other colors change?
Yes.
Have a look
Didn't know exactly how to make this stick, but if you comment the later #gray-base out, you see the color changing.

What exactly does !default do in CSS? [duplicate]

The twitter bootstrap code has a lot of CSS properties with a !default at the end.
E.g.
p {
color: white !default;
}
What does !default do?
UPDATE
My bad for not being clear. I am using the SASS part of Bootstrap.
!default is used often in Bootstrap Sass. It is similar to a reverse !important. All of Bootstraps Variables are set using !default to allow the developer to further customize bootstrap. With !default sass will only define a variable if it has not already been set.
This allows for more flexibility.
//Example1 Dress color = red
$auroras-dress-color: blue;
$auroras-dress-color: red;
//Example2 Dress color = red
$auroras-dress-color: blue !default;
$auroras-dress-color: red;
//Example3 Dress color = blue
$auroras-dress-color: blue;
$auroras-dress-color: red !default;
So Why is this important?
Bootstrap is a package. Most people don't edit the Bootstrap source. NEVER UPDATE THE BOOTSTRAP SOURCE. To customize bootstrap you will add your own variable file and compile it with the bootstrap code but never touch the native bootstrap package. Bootstrap sass's page has the full skinny on how to customize and compile it in the documentations.
I don't know why less does not do this. I have not worked much with less and do not know if it has it's own built in variable management.
Example fiddle
https://jsfiddle.net/siggysid/344dnnwz/
Twitter Bootstrap uses LESS as far as I've seen. On the other hand, !default is actually part of Sass, and is used for giving Sass variables ($var) default values, which would make it invalid in your given context, even in Sass.
Besides, I've not been able to find any references to !default in the LESS documentation, and to my knowledge it is exclusive to Sass. Are you sure you found this in Bootstrap's source and not elsewhere? Because I honestly don't remember seeing Sass/SCSS code in Bootstrap's stylesheets.
For what it's worth, the only valid token that starts with ! in CSS is !important, which you may already be aware of.
You can find the following exact definition and a decent explanation in sass-lang website in its doc section (variable) - default value:
Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS.
To make this possible, Sass provides the !default flag. This assigns a value to a variable only if that variable isn’t defined or its value is null. Otherwise, the existing value will be used.
default-values
if that variable isn’t defined or its value is null. Otherwise, the existing value will be used.
Example
case 1: null
// test.sass
$MySize: null
$MySize: 5rem!default // since MySize is "null" so use default
h1
font-size: $MySize
output CSS
h1 {
font-size: 5rem;
}
case 2: undefined
// test.sass
$MySize: 5rem!default // since MySize is "undefined" so use default
h1
font-size: $MySize
output CSS
h1 {
font-size: 5rem;
}
case 3: defined already
// test.sass
$MySize: 30rem
$MySize: 5rem!default // since MySize has been defined. So ignore this setting.
h1
font-size: $MySize
output CSS
h1 {
font-size: 30rem;
}
Here is an example.
$white: white !default;
If you don't define the $white before the code block above, then the $white will be white.
If you define it like this
$white: #eee;
then the $white will be #eee
Here is a link about it in bootstrap-vue,

Resources