I have a custom sass setup with bootstrap 5 and bunch of my own SCSS files, all of this gets compiled in style.css using gulp. I have a _colors.scss file which stores all the colors according to our design language. We use this to generate a bunch of classes that can be used any where to change colors:
// Text Colors
$colors: (
"icon-color": $slate-500,
'slate-10': $slate-10,
'slate-40': $slate-40,
'slate-300': $slate-300,
"secondary": $secondary-text-color,
"green": $green,
"light-green": $green-color,
"blue": $blue,
"blue-200": $blue-200,
"blue-300": $blue-300,
"blue-400": $blue-400,
"dodger-blue": $dodger-blue,
"mariner-blue": $mariner-blue,
"light-blue": $blue-100,
"cadet-blue" : $cadet-blue,
"aqua-10": $aqua-10,
"gray": $gray,
"gray-light": $gray-light,
"light-gray": $gray-100,
"bright-gray": $bright-gray,
"gray-200": $gray-200,
"clay": $clay,
"clay-10": $clay-10,
"mandy-pink": $mandy-pink,
"aqua": $aqua,
"violet": $violet,
"white": $white,
"primary": $primary-text-color
);
#each $color-name, $color-value in $colors {
.text-#{$color-name} {
color: $color-value !important;
}
.bg-#{$color-name} {
background-color: $color-value !important;
}
.border-#{$color-name} {
border-color: $color-value !important;
}
}
Problem is certain classes like .text-gray or .text-blue are not working. My guess is that since bootstrap also uses variables called gray and blue, its conflicting with my variables in _colors.scss.
On closer look, the css does gets generated properly (I found below declaration in final style.css):
.case-study .case-study-right .card .data-bar p:last-of-type,.share .social-media>span,.text-color-gray-200,.text-gray-200 {
color: #69727A!important
}
But using .text-gray has no effect, the class is not getting applied.
How do I fix this? please help!
First, if you're sure that you see the correct selector and the correct rule in your CSS file: it should be applied. And so, the rule should be visible in the browser console (even if overridden).
If you see it in your CSS file, but not applied in the browser console: check that your CSS file is valid (and that your gulp production script compiles fine), as a bad character could mess some part of it.
If you see your CSS in the browser console, but it's overridden by some bootstrap rules, you can override bootsrap variables, and change bootstrap colors by yours like so (import bootstrap before this):
$theme-colors: (
primary: #121212,
success: #8bcea8
...
);
You could also try this to replace bootstrap values by yours:
$theme-colors: map-merge($theme-colors, $colors);
The simple answer is:
Use Bootstrap 5 the intended way!
Bootstrap is a complex framework. All that huge number of classes work together including overwriting color settings if provided and used the intended way. In your code example you additional create helper classes Bootstrap would provide to you out of the box if you use it the Bootstrap way. As you did not do it leads to conflicts which are not easy to handle ... and nearly impossible to solve without to have the possibility to analyize the page itself.
This is what you may check:
You may check: are there other classes which blocks your classes?
In your example you use !important to get higher specifity. But the color is overwritten by other classes ...
Maybe that are Bootstrap which uses !important as well. In that case you can try to add your classes at the end of your CSS (after the Bootstrap classes) so they are able to overwrite in case of identical specifity.
Additional: in your example you added a huge bunch of non-bootstrap-classes. Maybe this individual added classes blocks your styling by adding a color with higher specifity (using !important as well which is not a good technique at all) to your element than your added class do.
In that case same solution may be possible ... but individual classes with !important and an additional higher specifity (i.e. using two class names in the selector) will win over your helper classes also your helper class comes later in your CSS file.
To be honest: most often analyzing such an huddle of classes indeed is only possible in the browser on the page direct using the developer tools.
But best way indeed would be ...
Do a correct Bootstrap theming and use Bootstrap classes!!!
You really don't need to create the helper classes on your own. Just do a SASS setup of Bootstrap ... and add your needed/additional colors NOT (or not only) to map $colors but AS WELL TO Bootstrap map $theme-colors. Bootstrap builds up helper-/utility-/elements-color-classes not on $colors but on $theme-colors. That means: doing that this intended way ... all your helper classes you added in your project on your own will be provided by Bootstrap mechanic in the correct order and avoiding conflicts to your CSS.
Use Bootstrap classes to style your page. Now you don't need to create an additional class .case-study { color: gray }. Just use the Bootstrap helper class and add .text-gray to same element. (Note: In your example you use the incredible number of NINE classes to do the same styling. In case 'text in cards' here is a nice hint how to realize it the bootstrap way: https://getbootstrap.com/docs/5.0/components/card/#border).
Just thinking about using complex Framework...
Bootstrap is done to help you. As there is a lot of code using that Framework only makes sense to use the code as much as possible without writing new classes. So best way indeed to work with it is to use the Bootstrap elements and styling them the Bootstrap way. That makes it simple and avoids conflicts... And: you are able to do nearly everything with these elements.
And if you need to extend Bootstrap i.e. with additonal classes: avoid (deep) nested classes and !important as well so you are able to overwrite settings with simple helper classes.
i had the similar problem it was my scss was successfully converted to the css but not applied, after checking for hours i found out ,i have written B capital while the class name was btn
so when everything is working then the problem is always in your code syntax!
I am trying to change value of CSS variable based on another variable. I want to check if current value of variable is white then set it to black...
In some class suppose my variable is --default-var, value of --default-var can be any color....
If value of default-var is white then change it to black
i tried
.my-class{
#if var(--default-var) == #fff{
--default-var : #000;
}
}
I have also tried
.my-class{
#if --default-var == #fff{
--default-var : #000;
}
}
both cases are not working..please help.
Best practice here is to create two classes with the different CSS values and then toggle the class using logic such as in C# Razor or Javascript. This keeps it cleaner to read.
You can not use this kind of Logic in CSS. There are workarounds though.
Use a Preprocessor
You could use either SASS or Less to create CSS-Files that are created conditionally based on variables that you can set yourself. This however only helps if you´re decision is made on build-time. So this will not help you if you want to react to user input.
This is not entirely true, as there are some pseudo selectors that in the end can change styles based on user input. However, you can not use them to react to variables set in your CSS.
Use Javascript
With Javascript you can manipulate elements and their style-Property or their class-List directly. In order to control under what condition you want these changes to be made you can use all the tools that you have in Javascript.
You could read what value your css variable has and then change styles on other classes based on that value.
Just Google for js DOM manipulation or setting css with js. In order to provide better ressources i´d need some more information on what exactly you want to do. This may be what you are looking for: https://stackoverflow.com/a/51860936/11930769.
The $mdc-theme-secondary: #6b2574 is already defined on top of the index.scss file.
I have a material checkbox component that by default uses the $mdc-theme-secondary as the background color. I want to change the color of the checkbox without modifying mdc-theme-secondary.
I was looking at the material documentation
.
mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)
It provides this mixin, but after trying different things, I still have no idea how to use it. I couldn't find any examples either.
Thanks for any help in advance.
#import "#material/checkbox/mdc-checkbox";
.mdc-checkbox {
#include mdc-checkbox-container-colors($mdc-theme-secondary, $mdc-theme-on-secondary,
$mdc-theme-primary, $mdc-theme-on-primary);
}
I figured out how to use the mixin... I have to select .mdc-checkbox.
I have LESS variables set up to manage colour selections. Here's part of it:
/* The themes
#lightTheme1:#grey300;
#lightTheme2:#grey100;
#lightTheme3:#grey50;
#lightTheme4:#fff;
#darkTheme1:#000;
#darkTheme2:#grey900;
#darkTheme3:#303030;
#darkTheme4:#grey800;
/* Set theme name
#theme:'lightTheme';
/* The chosen theme
#theme1:'#{theme}1';
#theme2:'#{theme}2';
#theme3:'#{theme}3';
#theme4:'#{theme}4';
/* Using the theme
#background:##theme3;
background-color:##theme3;
The issue I've got is that in order to use #theme1, theme2 etc I need to prefix with '##'. This is easy to forget because the normal variable syntax is a single '#' - is there anything I can do higher up in the hierarchy so that when I need to use the variables in code I can do so with a single '#'?
If you will only be using 1 theme at a time you could store the theme variables in seperate files:
lightTheme.less
#theme1:#grey300;
#theme2:#grey100;
#theme3:#grey50;
#theme4:#fff;
darkTheme.less
#theme1:#000;
#theme2:#grey900;
#theme3:#303030;
#theme4:#grey800;
Then rather than setting the theme via a string property, you can #import a theme:
#import "lightTheme.less"
Then your use of the theme is a single #:
background-color:#theme3;
var next_text=item.text().sub str(item.text().index Of("")+0,item.text().index Of("")+9);})
I wanted apply css property display none on the value next_text.How can i achieve that?
There must be Jquery object, On variable you can not apply css. Refer: http://www.w3schools.com/jquery/jquery_css.asp