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)};
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;
}
I am working on angular/typescript based SCSS. I have to override some CSS based properties in corresponding SCSS which is the part of the component.
For example Following properties needed to be in effect.
list-view-component.scss
.k-grid {
background-color:rgba(17,255, 238, 0) !important;
}
.k-pager-wrap {
background-color:rgba(17,255, 238, 0) !important; ---> this doesnt get effect in IE.
}
I need to make sure that everything else first loaded and then thense SCSS properties must get apply.
Because at the moment, when I open the UI at chrome these properties get in effect but at IE '.k-pager-wrap' doesn't get effect. Because I saw it's still overriden with another value later on in IE inspection tools. I don't know why.
Can somebody helps me in this?
Thanks
Try like this
:host ::ng-deep .k-pager-wrap {
background-color:rgba(17,255, 238, 0) !important;
}
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'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.
One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.btn-red{
background-color:red;
.radius;
}
.btn-green{
background-color:green;
.radius;
}
...
When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.
I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?
<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>
The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.
// Abstract placeholder.
%radius {
border-radius: 5px;
}
// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {
// Color modifier.
&-red {
#extend %radius;
background-color: red;
}
&-green {
#extend %radius;
background-color: green;
}
}
The CSS output will be:
.btn-red, .btn-green {
border-radius: 5px;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.
Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.
Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.
That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.
So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.
There are several benefits.
You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.
You can avoid repeating yourself.
#radius-size: 5px;
-webkit-border-radius:#radius-size;
-moz-border-radius:#radius-size;
border-radius:#radius-size;
You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts.
.radius(#radius-size) { ... }
Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.
for example:
you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:
#myinput {
&:valid { .has-success; }
&:invalid { .has-error; }
}
So lets say I set the background of 10 elements on the page to #base, then a user lands on the "Foo" page which has the class on the body of the page.
How does one update the #base via a css declaration? I understand that variables are local to a function (or css declaration) but there must be a method to do this! (would make styling alternative pages so easy!)
#base: #00000;
body.foo{
#base = #FFF;
}
LESS is a Preprocessor so...
...it all has to be precompiled into CSS ahead of time. That means all possible class combinations need to be made into valid CSS ahead of time. If you wanted something like this, you would need to do something like the following in your LESS:
LESS
#base: #000000;
.setColorOptions(#className: ~'', #base: #base) {
#classDot: escape(`('#{className}' == '' ? '' : '.')`);
#class: escape(#className);
body#{classDot}#{class} {
someElement {color: #base;}
.someClass {color: #base;}
// etc.
}
}
.setColorOptions();
.setColorOptions(foo, #fff);
.setColorOptions(bar, #ccc);
CSS Output
body someElement {
color: #000000;
}
body .someClass {
color: #000000;
}
body.foo someElement {
color: #ffffff;
}
body.foo .someClass {
color: #ffffff;
}
body.bar someElement {
color: #cccccc;
}
body.bar .someClass {
color: #cccccc;
}
Obviously if there were many elements and a lot of color dependent things going on, this could get big fast. Imagine 100 elements under body with three color variations as above, and you have 300+ lines of CSS, 200+ (two-thirds) of which do not apply to any one page. And this doesn't account for other changes, like background colors, etc. In such a case, it is best to set up different LESS files that import a different set of values for #base and build different style sheets to be loaded on the pages that need it. However, if you are just doing a small subset of color changes to a page, this could be a valid way to go.
There is no way to do that.
LESS has no way to know whether the selector body.foo will apply at compile time.