i have a question about extending Bootstrap4.
According to bootstrap documentation i have to put the BS-variables in the end of my file.
so my (scss) file looks like:
$color1: #f0f0f0;
$padding-left: 16px;
$primary: $333;
#import "variables";
But in this case i cant use any bootstrap variables, for example the spacing array or the other color-values (secondary, success, ...).
So if i want to use some BS-variables i need to import bootstrap first.
If i do so, then bootstrap is using his "$primary" value and ignores my own, because it is declared later.
I hope you understand my concern. Does anyone have an idea how to fix this?
Related
I'm trying to implement a dark and light theme using bulma. The approach I was thinking of is to assign classes to elements dynamically using vue (e.g .dark-theme or .light-theme) and then use different colours depending on those themes. However, customising the bulma variables based on class selectors in main.scss doesn't seem to be working, for example:
.dark-theme {
$primary: /* some colour; */
}
.light-theme {
$primary: /* some other colour; */
}
#import "~bulma/bulma"
The closest question I could find was this one but the solution does not work for me as I need to modify the actual $ variables based on class selectors.
If my approach is stupid and there is a better one please let me know. Note that my bulma setup appears to be working correctly, and changing the variable outside of selectors works as expected.
You could compile two css files from the bulma scss files, one for dark mode & one for light mode. Then if dark mode is enabled just reload the page with the dark css file or use the method in the first comment to change theme without reloading.
Here it suggests swapping the $scheme-main & $scheme-invert values to generate a dark mode.
I do not have experience with Vue but I know that it would be possible to implement this in JavaScript.
This question is less of a code question and more of a best-practices question. I am working on a custom bootstrap theme based on https://github.com/HackerThemes/theme-kit. I have a working theme that I like, however, I am overriding some styles in the original Bootstrap theme. Even in the minified CSS, these are duplicated. For example, Bootstrap defines...
.btn-danger:hover {
color: #fff;
background-color: #ae130b;
border-color: #a2120a;
}
...but my code also defines...
.btn-danger:hover {
border-color: #0000;
}
In the final stylesheet, both of these styles are present. The second style overrides Bootstrap and it looks just fine. However, this leads to useless code. First of all, is there a postprocessor of some sort that I can use with Gulp to eliminate these duplicates and consolidate them? Second, should I just fork the Bootstrap repository and modify the original SCSS directly?
It depends on what you #import. Looking at mytheme.scss, the entire Bootstrap SASS is imported, creating full duplicate code in the final CSS.
Instead you can pick specific SASS files to import and look at the option variables which also effects what CSS is generated. For example, setting $enable-grid-classes: false will prevent duplication of the entire grid system in the generated CSS.
StackBlitz link
For some reason when setting Bootstrap variables to a CSS3 variables my Angular 6 app breaks with the following error
This is indeed the first usage of the SCSS variable in the bootstrap file, so it is obviously not happy with how I am setting it. I have made a very simple StackBlitz to replicate the issue. Have a look at the styles.scss.
Essentially this is what produces this error.
styles.scss
:root{
--primary: #0f0;
}
$primary: var(--primary); // Broken
// $primary: #f00; // Working
#import '../bootstrap/scss/bootstrap';
Any ideas on why Bootstrap may not be happy with this?
Found the answer.
It appears you cannot use css variables within SASS functions due to the dynamic nature of css variables together with the fact that sass is a preprocessor.
See this stack for a more detailed explanation.
I've seen tutorials about modifying Bootstrap by overriding existing styles. However, the question I can't seem to wrap my head around is how do I remove certain styles Bootstrap enforces without directly deleting or commenting out that section in the source code?
For example, I don't want to use any of Bootstrap's #media print styles. My current solution is directly commenting out that section. However, I don't think this is the best way to go about it.
If there are only a few elements that you want to get rid of, you can override them and cancel their styles from your own stylesheet. Let's say that an element has a 1px solid #ccc border and that you don't want that, you can override it with 1px solid transparent (or just border: none;) in your own stylesheet.
That being said, if you have to modify large chunks, then it's a lot easier to just edit the source code, remove what you don't want/need. Or, go the other way around, only add what you want/need to your own CSS if there isn't too much.
You best choice will be to use the LESS (or SASS) version of bootstrap and compile it yourself. Commenting out unneeded parts is then done in bootstrap.less and as simply as:
// ...
// Reset and dependencies
#import "normalize.less";
//#import "print.less";
#import "glyphicons.less";
// ...
The question pretty much says it all.
For instance, if I were using, say, Twitter Bootstrap, could I define classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or does inheritance in SASS only work within the scope of a single file?
YES! its possible.
If you want all <button> elements to inherit the .btn class from Twitter Bootstrap's Default buttons
In your styles.scss file you would have to first import _bootstrap.scss:
#import "_bootstrap.scss";
Then below the import:
button { #extend .btn; }
**I might be mistaken, but if I get what you're trying to do, can't you just use the #extend .classname; command inside the element that you'd want to extend? Naturally, you should only modify your own code to preserve updatability.
To my knowledge, you have to use #import of the file containing the classes you want to use into your SASS file in order to utilize them in that file. However, I am not a SASS/SCSS expert, so someone may know of another way to remotely use them that I am not aware of.
Just as the accepted answer has shown this is possible with #import, however #import has been deprecated by sass
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
The #use rule is better suited for use now, since it does not pollute the scope of the importing (user) module. unfortunately at the time of writing the use rule is only implemented in Dart sass.