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.
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.
I want to change with javascript some SASS/CSS variables to change the color of multiple elements. 😅
How I can send SASS variables to CSS as variables?
I tryed it like in the documentation of Sass, but it gives me an error, on compiling the CSS.
Here the Error:
Error in plugin "sass" Message:
dev\sass\_settings.sass Error: Invalid CSS after "$primary-color: #ff2aad;":
expected 1 selector or at-rule, was "root: {"
on line 5 of dev/sass/_settings.sass
from line 1 of dev/sass/style.sass
$primary-color: #ff2aad;
Here my SASS code:
$primary-color: #ff2aad
:root
--primary-color: #{$primary-color}
Im using an NodeJS enviroment with an gulpfile.js.
My gulp-sass version is 4.1.0
It passes if I remove this part:
:root
--primary-color: #{$primary-color}
Maybe it exist an better way to manipulate SASS variables with javascript. If someone have an idea or documentation this would really help me 😊
Update / Solution:
I found out by using an CSS to SASS Converter that I have to add an \ before the :root Element
The Solution looks like this in SASS:
$primary_color: #ff2aad
\:root
--primary_color: #{$primary_color}
h1
color: var(primary_color: #ff2aad);
I didn't found any documentation about this but it seams to work perfectly fine without error or issues. 😊
Thanks on all that tryed to help. You Rock 🤘
I don't understand the difference between CSS custom properties (variables) and SCSS variables (I am new to Sass by the way).
If this CSS code:
:root {
--someColor: coral;
}
body {
background: var(--someColor);
}
achieves the same results as this SCSS code:
$someColor: coral;
body {
background: $someColor;
}
Why were SCSS variables introduced? Are they really the same as CSS variables, or am I missing something?
SCSS is a preprocessor. That means it is not CSS, but is converted into CSS at 'compile time'. In the resulting CSS code there is no resemblance to the original SCSS code. Hence you cannot change the variable values at CSS 'runtime'.
Historically SCSS is a fairly old technique. Actually it dates back to as far as 2007. It was invented by the motivation that CSS lacks certain features amongst which are variables (and nesting and loops and mixins etc.).
CSS variables are a quite recent addition to the CSS standard (The last call working draft seams to be from 2014). They didn't render SCSS variables useless, because you can do things to SCSS variables which you can't do with CSS variables (to my knowledge) like color calculations.
On the other hand you can do things with CSS variables that you can't do with SCSS variables like changing at runtime.
BTW: CSS variables are not the official jargon. They should be called custom properties. But everyone calls them variables.
Addendum 1
One difference I was not talking about. You can't change SCSS variables with JavaScript. CSS Custom Properties however can be accessed and changed with JS
Addendum 2
This article on CSS Tricks has a good overview: https://css-tricks.com/difference-between-types-of-css-variables/
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.
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?