In my angular 11 app I am trying to globally use css variables to declare global colors.
In my styles.scss I have:
:root{
--primary : #0b68e8;
--secondary:#ABCFFF;
}
.test-class{
background: var(--primary);
}
When I am applying that class in one of mine components I can see that var was not properly taken from declared variables:
I tried to find any solution , but cant resolve it. Do you maybe know what is wrong here?
try
.test-class{
background: #{var(--primary)};
}
BTW, if you're using sccs, why not use sass variables?
$primary: #0b68e8;
.test-class{
background: $primary;
}
Related
I have a variable file that has two definitions of themes I want to overwrite:
_vars.scss
body {
$bg-color: #fff
}
body.theme-dark {
$bg-color: #333
}
I´m calling the variables in my Angular button component:
button.scss
#import '_vars.scss';
.button {
background-color: $bg-color;
}
But I´m getting the following compiling error:
SassError: Undefined variable.
background-color: $bg-color;
Whats is the right way to overwrite variables depending on my body theme class?
Thanks
You define $bg-color depending on the theme, but never $font-size-18.
On a side note, I would consider to use CSS Custom Properties instead of SASS variables if I was in your shoes. Codyhouse have an interesting and easy to understand article about this, which also talks about color themes.
If you want to dig deeper into this topic you may want to read this article.
First of all variables inside scope valid only in that scope not universally. Now for your question see below :-
_vars.scss
Instead of making variables inside body scope create it in global scope.
$bg-color: #fff;
body {
background-color: $bg-color;
}
and then import it in your button.scss without underscore "_"
#use "vars" as *;
button {
background-color: $bg-color;
}
In my project I have a CSS custom variables like this:
:root {
--primary-color: #e04c4c;
--secondary-color: #2c2c5e;
--text-color: #d67900;
}
In my LESS files I have used LESS color functions to get more colors base on its primary and secondary. This is how its look like:
.component1 {
background: darken(--primary-color, 10%);
}
.component2 {
background: lighten(--secondary-color, 5%);
}
But when I compile this, it gives an error like this?
// Undefined_methodError: error evaluating function darken: //
Object # has no method 'toHSL'
When googling I found a solution for SASS, but not for LESS.
Can anybody tell me is there any possible workaround for this particular case?
Thank you.
I am using the style guidelines specified at https://material.angular.io/guide/theming-your-components
My component has a mat-form-field where I want to change the border color. If I put the ng-deep style in component.scss file, it gets applied aliright, like below:
:host ::ng-deep {
mat-form-field.active-field .mat-form-field {
&-flex {
border: 2px solid red;
}
}
}
Now, I want to keep the border color dynamic and dependent on theme. I have a mixin defined in my-component-lib.theme.scss, which gets called from a global theme file of the application. I tried to put the same style inside that mixin as:
#mixin my-component-lib-theme($theme) {
$primary: map-get($theme, primary);
.component-container ::ng-deep {
mat-form-field.active-field .mat-form-field {
&-flex {
border: 2px solid lighten(mat-color($primary), 30);
}
}
}
}
But it is not working. I have some other styles in the mixin which does not use ng-deep, and those styles are working fine. So, it seems the issue here is with ::ng-deep in global theme mixin. How can I solve this?
The ::ng-deep selector is an angular-specific pseudo-class, which tells the Angular-Compiler, that the following CSS shall be applied to Sub-Components as well. This selector will not end up in the browser, as the browser wouldn't know it!
Your global theme file is probably included directly in your html like this <link rel="stylesheet" type="text/css" href="path/to/global/theme.css"> and doesn't know anything about angular (even though it's probably SASS/SCSS-compiled). Just use plain old CSS here (or SASS/SCSS if you're using the default Angular CLI). You may simply omit the ::ng-deep selector here, as your global theme is applied globally anyway.
I need to be able to use CSS variables because I need to have an hover effect (background-color) to be customizable by my VueJs app.
But my CSS stylesheet should have a default value, which is stored in a nested SCSS map. (map-getter is a function which returns values from nested maps)
I know that my SCSS code works, because I get the intended result when I do this:
.theme--dark .AppNavTile:hover {
background-color: map-getter($theme-dark, AppNav, hover);
//returns background-color: rgba(255, 255, 255, 0.87); in my browser's console
}
In order to use CSS variables, I can modify the code as follows:
.theme--dark .AppNavTile:hover {
--hover-bg-color: red;
background-color: var(--hover-bg-color);
}
It works fine and I have a red background when hovering the element.
Then I try to combine both:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
According to by browser's console, this returns the following:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
So it seems that the SCSS code remains uncompiled in the CSS variable. Is there any way around it?
Thanks!
The "problem" with CSS variables is they can have any value – why map-getter($theme-dark, AppNav, hover) is rendered as is. To instruct SCSS that this is actual SCSS code and not a random string you need to use interpolation (like if you use SCSS variables inside calc):
--hover-bg-color: #{map-getter($theme-dark, AppNav, hover)};
Consider the following SCSS:
$color-black: #000000;
body {
--color: $color-black;
}
When it is compiled with node-sass version 4.7.2, it produces following CSS:
body {
--color: #000000;
}
When I compile the same SCSS with version 4.8.3 or higher, it produces following:
body {
--color: $color-black;
}
What am I missing? I checked release logs, but could not found anything useful. Also, I wonder if this change is genuine why does it have only minor version change? Should it not be a major release?
Also, what is my alternative? Should I use Interpolation?
Just use string interpolation:
$color-black: #000000;
body {
--color: #{$color-black};
}
Apparently the old behaviour is not intended and violated the language specs of SASS:
CSS variables mixed with SCSS variables don't emit proper CSS in 4.8+
CSS variables aren't properly compiled
Assigning SASS variables to CSS Variables (Custom Properties) no longer works
scss and css
I found a workaround to mapping the scss variables to css variables.
See Terry's answer for better use
Scss:
// sass variable map
$colors: (
color-black: #FFBB00
);
// loop over each name, color
:root {
// each item in color map
#each $name, $color in $colors {
--#{$name}: #{$color};
}
}
Css:
:root {
--color-black: #FFBB00;
}
I had an issue with older sass versions.
Trying to compile a list of variables coming from an array, it would get stuck with the double dash. Here's my solution in case it helps someone
$var-element:'--';
:root {
#each $color in $color-variables {
#{$var-element}#{nth($color, 1)}: #{nth($color, 2)};
}
}