Is there any way I can set my color variables depending on what class is on the html element? Or any other way to achieve this same goal?
html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
}
}
This is basic theming. You would either want to use a mixin or include to do multiple themes in a single CSS file. This is how you would go about it using includes:
_theme.scss
section.accent {
background: $accent;
}
.foo {
border: $base;
}
.bar {
color: $flat;
}
main.scss
html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
#import "theme";
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
#import "theme";
}
}
You could just as easily make a mixin that takes 3 colors as its arguments to use in place of the include:
#mixin theme($accent, $base, $flat) {
// .. do stuff ..
}
Unfortunately, Sass/Scss files need to get compiled into Css files, in order to be supported in your web-browser.
Since Css files don't support variables, you can only set a variables value in the Scss template, because the Sass compiler will replace the var. (in every position, the var. has been used), with the given value.
That means, that it does not help to change the color of the variable, depending on what class is included in the Html file, because the Css file won't contain any variables.
The only way you could do such thing, is by:
reading the Html file to find out what class has been used,
than changing the Scss template variables to the right color value
and compiling the Scss template into an Css file
If you like to use JavaScript, you can do this:
You will need an HTML element with an Id and a Class (the one that will decides, what color to use).
<exampleTagg id="Target" class="Sunrise">...</exampleTagg>
Next, you will need to add some JavaSript
var CurrentColor = document.getElementById("Target").className;
if (CurrentColor == "sunrise") {
document.exampleTagg.style.exampleProperty = "#37CCBD";
}
else if (CurrentColor == "moonlight") {
document.exampleTagg.style.exampleProperty = "#18c";
}
(the first line will declare a variable, that contains the value of our exampleTagg element (the one with the "Target" id), then the if statement will find out the name of our class (sunrise or moonlight) and last, we will change the background of our exampleTagg to the color we like to)
To use this example for your own purposes, replace the exampleTagg with some real tagg and change the exampleProperty to an valid Css property.
Notice, that you will not need Scss for this job (u can still use it), because JavaScript will access your compiled Css file.
Related
So I would like to define a global color in my Angular project in the styles.scss stylesheet.
I know I can defined global variables like this
:root {
--blueish: #658bc7;
}
and then in other styles(heets) reference to it
p {
color: var(--blueish);
}
But this is NOT a globally defined color. This is a globally defined variable.
We could for example do
p {
color: aliceblue;
}
and this does work since aliceblue is globally defined along with a lot more preset colors. Is there a way for me to ADD a color to this list using (S)CSS? If not, would it be possible in less or SASS?
You can assign in SCSS vars with $varName. Important note if you like to use dash or underScore in your varnames. For the SASS compiler, $var-name is the same as $var_name. You have to take that into consideration.
SCSS
$blueish: #658bc7;
p {
color: $blueish;
}
Will compile to CSS:
p {
color: #658bc7;
}
You Can Define and Assign Variables in scss/sass Like This
$blueish: #658bc7;
p {
color: $blueish;
}
Notice that in sass/scss files named "blablabla" are globally scope
while files named "_blablabla" are not globally scoped and must be imported by.
You Must Have one globally file in sass/scss for example named "style.scss" that imports all scss/sass files in it for example:
/*
This File is only for imports
*/
#import "./libraries/_variables.scss";
#import "./libraries/_mixins.scss";
#import "./layouts/_header.scss";
#import "./pages/_about.scss";
Also, you can not add "_" and ".scss" in the importing it is not necessary for your editor will understand it for Example :
#import "./libraries/variables";
#import "./libraries/mixins.scss";
#import "./layouts/_header";
They are the same as the above example!
I have two css variables and two scss variables , the problem is the last scss variable doesn't return a value at all.
note that the values of the two sass variables comes from the css variables.
the first scss variable takes its value normally from the css variable.
:root {
--intro-img-url: url("../images/pexels-los-muertos-crew-7487374.jpg");
--dl-mode: black;
}
// the intro-img scss variable takes its value normally from the
// css variable and there's no problem with it.
$intro-img: var(--intro-img-url);
// but the dl-mode scss variable doesn't take the css variable val
// and just return nothing
$dl-mode: var(--dl-mode);
#if $dl-mode == black {
:root {
--dominant1-wmode-color: #030712;
--dominant1-bmode-color: #ffffff;
}
} #else {
:root {
--dominant1-wmode-color: green;
--dominant1-bmode-color: #030712;
}
}
Even though --dl-mode is set to black in the context of :root, the value of $dl-mode is set to var(--dl-mode). This is what your SCSS compiler will be seeing when it runs the check #if $dl-mode == black, so that check will always be false.
SCSS cannot look inside the values of CSS variables, because it needs to know those values at compile time but those values may depend on context within the HTML itself. For example, consider the following:
:root {
--my-var: black;
}
.class {
--my-var: white;
}
$my-var: var(--my-var);
#if $my-var == black {
// How can you know the value within --my-var if you don't know if you're in a .class element or not?
}
I'm trying to pass some CSS Custom Properties to a SASS Mixin. I'm able use the variables when applied directly in the styling I want. But when I try to use a variable in an If statement, it doesn't work.
Mixin Example:
#mixin bg-color($hue, $status) {
background: hsl($hue, 50%, 50%); // $hue works as expected
#if $status == 'danger' { // doesn't work!
color: 'red';
} #else if $status == 'warning' { // doesn't work!
color: 'orange';
} #else { // always enters the else branch
color: 'black';
}
}
CSS:
:root {
--hue: 195;
--status: 'default';
}
.demo {
#include bg-color(var(---hue), var(---status));
}
If I manually add the status value to the mixin, it works:
.demo {
#include bg-color(var(---hue), 'danger');
}
Any idea what might be the issue?
UPDATE: As #temani-afif mentioned, this approach isn't possible because SASS files are compiled before CSS variables are used.
If you have some file, where you import all SCSS files, it depends which is imported first and which are imported after.
Make sure that one that you need to be Read by VS is first.
For example i needed to read first my variables, so it have to be first, other way, my code read mixin, and doesnt know yet what is '$blue'.
I've defined a Sass mixin and used it in a class styling. I'm using the class in template. I need to decide the color on runtime. So I'm trying to override mixin. But its showing in #ff0000 the color I defined in mixin initially.
For some reason I can't use an extra class, What could be the best solution in this scenerio.
My stylesheet app.scss
#mixin mx-color {
color: #ff0000;
}
.my-color {
#include mx-color;
}
Angular template view app.html.haml
:css
#mixin mx-color {
color: {{custom_color}}; // custom_color contains hex-color to replace
}
%body
%p.my-color
This text must show-up in custom color but its showing the default color.
Please check the compiled HTML/CSS output. I don’t think it is possible to just overwrite a mixin and expect the SASS blocks where the mixin was used to update automatically.
Is there any way I can set my color variables depending on what class is on the html element? Or any other way to achieve this same goal?
html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
}
}
This is basic theming. You would either want to use a mixin or include to do multiple themes in a single CSS file. This is how you would go about it using includes:
_theme.scss
section.accent {
background: $accent;
}
.foo {
border: $base;
}
.bar {
color: $flat;
}
main.scss
html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
#import "theme";
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
#import "theme";
}
}
You could just as easily make a mixin that takes 3 colors as its arguments to use in place of the include:
#mixin theme($accent, $base, $flat) {
// .. do stuff ..
}
Unfortunately, Sass/Scss files need to get compiled into Css files, in order to be supported in your web-browser.
Since Css files don't support variables, you can only set a variables value in the Scss template, because the Sass compiler will replace the var. (in every position, the var. has been used), with the given value.
That means, that it does not help to change the color of the variable, depending on what class is included in the Html file, because the Css file won't contain any variables.
The only way you could do such thing, is by:
reading the Html file to find out what class has been used,
than changing the Scss template variables to the right color value
and compiling the Scss template into an Css file
If you like to use JavaScript, you can do this:
You will need an HTML element with an Id and a Class (the one that will decides, what color to use).
<exampleTagg id="Target" class="Sunrise">...</exampleTagg>
Next, you will need to add some JavaSript
var CurrentColor = document.getElementById("Target").className;
if (CurrentColor == "sunrise") {
document.exampleTagg.style.exampleProperty = "#37CCBD";
}
else if (CurrentColor == "moonlight") {
document.exampleTagg.style.exampleProperty = "#18c";
}
(the first line will declare a variable, that contains the value of our exampleTagg element (the one with the "Target" id), then the if statement will find out the name of our class (sunrise or moonlight) and last, we will change the background of our exampleTagg to the color we like to)
To use this example for your own purposes, replace the exampleTagg with some real tagg and change the exampleProperty to an valid Css property.
Notice, that you will not need Scss for this job (u can still use it), because JavaScript will access your compiled Css file.