I'm trying to use the same colors again and again in my Angular test project. So, I made a constants.css where I declare my root constants which are all colors at the moment. However I'm stuck at trying to use them in my individual components' css files.
I tried to include constants.css at the html file and doesn't work. I tried both #import url("constants.css") and #import "constants.css".
constants.css
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
nav.component.css
#import url("../../../constants.css");
a.logo {
color: var(--secondary-color);
}
I expected my logo text to be yellow but it's just default black.
You've forget to declare your variable in your css file where you want to use global variable:
#value --secondary-color from "here should be your address";
a.logo {
color: var(--secondary-color);
}
Let me show an example:
shared.css:
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
and in main.css you should write #value --secondary-color like this
#value --secondary-color from "./shared.css";
.background {
background-color: var(--secondary-color);
}
And do not forget to include your css files:
<link href="shared.css" type="text/css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
Do not forget that order of declaration of stylesheets does matter.
My problem has been the import not working at all because it's Angular thing. I have to import my constant into the main style.css and importing in individual css files doesn't work at all.
The right answer of this link is the answer.
Angular 6 - Less CSS' import is not working anymore
Related
I imported the bootstrap scss using the following code
#import "node_modules/bootstrap/scss/bootstrap";
I can even change default bootstrap variables like :
$border-radius: 1rem;
But the thing is that I can't use bootstrap colors in my own css selectors like this, Why the following code doesn't work? It doesn't change the color.
aside a {
color: $success;
}
use like this
#import "style/variables";
#import "node_modules/bootstrap/scss/bootstrap";
#import "style/my_other_SCSS
in variables.scss
$border-radius: 1rem;
in my_other_SCSS.scss
aside a {
color: $success;
}
this will work.
The issue is that $success isn't set as a SASS/SCSS variable, but rather a CSS var, e.g --success:
aside a {
color: var(--success);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<aside>
link
</aside>
Here's the documentation:
https://getbootstrap.com/docs/4.0/getting-started/theming/#available-variables
There was another !important rule in the stylesheet that was overriding the link color.
a {
color : white !important
}
This might seem basic, but I can't figure out how to use CSS variables in LESS?
variables.css:
.root {
--header-color: white;
--content-color: yellow;
}
styles.less:
#import "../variables.css";
.header {
color: #header-color;
}
I get error "#header-color is undefined".
LESS allows you to use normal CSS code, so use one option could be just use the variable as CSS:
#import "../variables.css";
.header {
color: var(--header-color);
}
Also, you can save the css var to a LESS var:
#import "../variables.css";
#header-color: var(--header-color);
.header {
color: #header-color;
}
I have an Angular CLI app and I'm using #import '~#angular/material/theming'; in the global styles.scss. I also have a component where I would like to define a css class in that component's .scss file that uses some of the Angular Material typography:
#import '~#angular/material/theming';
$config: mat-typography-config();
.myClass {
font-size: mat-font-size($config, title);
font-weight: bold;
}
By importing ~#angular/material/theming more than once in my application, will it include that css more than once and bloat my payload? Or is the Angular CLI compiler smart enough to handle this?
If you're importing the same CSS into multiple components, then yes the CSS will be duplicated, but each time it will be scoped to that component.
For example if you have the following...
product-list.component.css:
#import '../../foo.css';
...
top-bar.component.css:
#import '../../foo.css';
...
../../foo.css:
a { color: red; }
Your css output in the tag will look something like this:
<style>
a[_ngcontent-gna-c48] { color: red; }
...
</style>
<style>
a[_ngcontent-gna-c50] { color: red; }
...
</style>
Here's a full StackBlitz based on Angular's Getting Started example project.
How to use CSS variable in global CSS file
Just check style.css file in stackblitz
https://stackblitz.com/edit/angular-themeing-y3jwrk?file=src/styles.css
in the global css file, styles.css, I have this code:
import ...
:root {
--main-color: #3f51b5;
}
it declares a css variable, "main-color"
then in the child component css file, I can use the variable directly
#component-body {
background: var(--main-color);
}
In the global style.css file, define custom properties in a :root selector.
Global variables in CSS will enable us to define theme variables such that multiple components can use the same.
Here you go:
app/style.css
:root {
--primary-color: #fff;
--background-color: #e5e5e5;
--text-color: #2d2d2d;
}
To define a CSS custom property,prefix the property with two '--' like --text-color:#2d2d2d.
Now we can reference the variable in other CSS files.To use a custom property, use the var keyword to pass in a reference to the custom property.
app/header/header.component.css
:host {
background-color: var(--primary-color);
color: var(--text-color);
}
Say I am using SASS and I want to borrow heavily from some existing stylesheet, be it another SASS stylesheet or a CSS one. I can #import that other sheet, then use #extend to use some of its rules. Is there an option to then exclude all the other stuff I didn't use from the resulting CSS?
#import takes the whole stylesheet/partial and puts it in your stylesheet, there's no way to exclude any of the rules aside from overwriting them all to defaults. If you have an originating SASS file you could abstract them all into partials and then #import what you need into your new file.
There's no way to import another sass file so that #extends can be used without rendering the content. Create and import a partial full of %placeholders to use #extend without renders content would be a good choice if it wasn't be rendered like this:
_import.scss
%button {
color: #fff;
width: 72px;
height: 24px;
}
main.scss
#import "import";
.button-blue {
#extend %button;
background-color: blue;
}
main.css
.button-blue {
color: #
width: 72px;
height: 24px; }
.button-blue {
border: 1px solid #fff; }
So I think that the best way to achieve your goal is import a partial with some mixins in your style, I 've been using sass for half a year and so far I haven't had a need to import #extends yet so please, tell me what you want to do exactly with the #extend and I will try to help you to get it with a #mixin