I have two css files constants.css and main.css
In my constants.css file root: { --primaryColor: red; }
In my main.css file .example { background-color: var(primaryColor); }
Expected behaviour is red color as background-color in . example class, but it's not working.
I tried #include 'constants.css' and #include url('constants.css'), but it didn't helped.
So my question is that how to include root constants from another css file?
define your css variables in your constants.css
:root {
--green: #119955;
}
then import it using #import './constants.css; in your main.css file.
and use your variables
#import './constants.css';
body {
background-color: var(--green);
}
Related
When trying to display in CSS the SASS variable that I declared, I don't get the variable itself in the CSS output file, but the value given to the variable.
To be more clear, this is what I get:
SCSS/SASS input
$gray__background: #2d2d2d;
:root {
--gray__background: #{$gray__background};
}
body{
background-color: $gray__background;
}
CSS "output"
:root {
--gray__background: #2d2d2d;
}
body{
background-color: #2d2d2d;
}
That's what I was expecting to get:
CSS "output"
:root {
--gray__background: #2d2d2d;
}
body{
background-color: var(--gray__background);
}
Short story: I want to know if the result in the CSS "auto generated" file background-color: var(--gray__background);, instead of background-color: #2d2d2d; is possible to achieve.
I use the Live Sass Compiler extension for VSCode.
Sorry if my question is a little bit vague. I'm new to coding.
The :root variables are being declared in the SCSS, but are not being used, so they wouldn't show up on the CSS output.
It looks like you'll have to use --gray__background in the SCSS rather than $gray__background so it becomes: background-color: var(--gray__background);
.
Hope this helps.
I'm using snackbar in my Angular 9 project but some reason I'm getting the same background and text color for action button. I added css style in the component.scss file and also global style.scss file but still not working.
this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!',
{ duration: 5000, panelClass: "blue-snackbar"}).onAction().subscribe(() => {})
I also tried like this
panelClass: ['my-snack-bar', 'button-bar']}
I also add this in styles.scss and component.scss file but still not working
.my-snack-bar {
background-color: #E8EAF6;
color: red;
}
.button-bar {
background-color: pink;
color: blue;
}
example
Not sure why it's happening..any suggestion or help will be really appreciated.
In your global styles file, usually styles.scss you need to target the panelClass property, something like this:
.my-snack-bar {
background: #2196F3;
button {background:white; color: blue}
}
Here's a working example https://stackblitz.com/edit/angular-stacb4-b1fuu5
This question already has an answer here:
LESS CSS - Change variable value for theme colors depending on body class
(1 answer)
Closed 2 years ago.
I am importing a less file inside Mixins but it is not compiled into the output. I am running command as lessc client.less > client.css. Below is my code.
client.less:
#color: #000;
#import "theme.less";
#import "dark-theme.less";
.themeDefs(1);
theme.less:
body {
color: #color;
}
dark-theme.less:
.themeDefs(1) {
#color: #fff;
.darkTheme {
#import "theme.less";
}
}
Output:
body {
color: #000;
}
Expected Output:
body {
color: #000;
}
.darkTheme body {
color: #fff;
}
By referring this link, I am able to achieve this by using loop in less css.
My css file is in: media folder.
my images are in: media/msg folder.
This is the setting of the css file:
.info {
color: #00529B;
border-color: #789FCC;
background-color: #CDEAF7;
background-image: url('/msg/info.png');
}
.success {
color: #264409;
border-color: #C6D880;
background-color: #E6EFC2;
background-image:url('/msg/success.png');
}
.warning {
color: #514721;
border-color: #FFD324;
background-color: #FFF6BF;
background-image: url('/msg/warning.png');
}
.error {
color: #8A1F11;
border-color: #FBC2C4;
background-color: #FBE3E4;
background-image: url('/msg/error.png');
The images are not loading.
When I do "inspect element" from browser it tells me "could not load the image".
as far as I know it should take the relative path of my css file and add the path to the image... but it doesn't work.
What do I do?
The problem is because you are starting your paths with /...
'/msg/error.png' => base_url/msg/error.png
'msg/error.png' => css_url/msg/error.png
So just removing the / will work.
Your CSS will be evaluated based on the file that imports it.
To avoid any issues, always give paths to images and other files based on the document root:
/media/msg/warning.png
I'm trying to use http://startbootstrap.com/stylish-portfolio in my rails app however I'm getting the following error in my stylish-portfolio.css.scss.erb file:
ActionView::Template::Error (Invalid CSS after "body ": expected selector or at-rule, was "{"
This is my css file:
#import 'bootstrap'
/* Global Styles */
html,
body {
height: 100%;
width: 100%;
}
.vert-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vert-text h1 {
padding: 0;
margin: 0;
font-size: 4.5em;
font-weight: 700;
}
...
My guess is that you are missing a semicolon in the stylish-portfolio.css.scss.erb file, maybe after an SCSS variable definition?
Here's the original CSS file I assume you are basing this on, maybe you want to do a diff between that and yours to determine what has changed.
Edit: Yup, apparently there is a missing semicolon after the first line. The #import statement
#import 'bootstrap'
should instead be
#import 'bootstrap';
since you are using the .scss extension. You can omit the semi-colon if you are using the .sass extension.