Postcss-simple-vars is not working properly - javascript

I've been at this problem fro quite some time and can't seem to find a solution. Any help would be greatly appreciated. I have created _variables.css file which hold all my CSS variables. I use one of the variables in _global.css on the body tag. However, the styling isn't applied. I have attached screenshots. Thank you. _variables.css. _global.css. styles.css error message

You are using css preprocessors variables so you have to change file extensions to be .scss, also you need to compile your .scss files to .css , check this guide
or you can use css variables with different syntax , just like that
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}

Related

<style> vs filename.css - How do I set margin of class rightly?

enter image description here
I have one problem that I can't set the margin-bottom in the class.
To sum up, I have one tsx file and it imports css file. And in the css file, I mentioned
.Form-formTitle-0-2-22 {
margin-bottom: 0.5rem;
}
But it doesn't be applied. Does anyone happen to know how to fix this? and I am curious what's as well.
Thank you.

How can I handle multiple themes in an angular component?

I'm working on an Angular 9 project where I'm creating two themes and each theme has it's own css output file.
I modified the angular.json file to handle that:
"styles": [
{
"input": "src/styles/themes/light-theme.scss",
"lazy": true,
"bundleName": "light-theme"
},
{
"input": "src/styles/themes/dark-theme.scss",
"lazy": false,
"bundleName": "dark-theme"
}
],
light-theme and dark-theme are my input files, where I'm setting variables like:
$background-color
$button-color
$text-color
etc, etc.
My problem is that I cannot use those variables from each component, because my component won't know what those variables are. I cannot import one or another theme, because I would like to use the values that I declared in the input file.
How should I handle this? Is there any way of "importing" the input file I wrote on my angular.json file?
Thanks!
If you define sass variables in your global styles, you won't be able to access them after when you dynamically change the theme. This is because the dynamically loaded theme will contain css rules only, not sass; besides at run time your components scss has also already compiled to css so there is no more notions of sass variables either way.
What you can do instead is use CSS variables, which have good browser support (apart from IE and opera mini).
So for instance, you can define these variables in your theme files
dark-theme.scss
:root{
--button-background: darkgrey;
--button-color: white;
}
light-theme.scss
:root{
--button-background: lightgrey;
--button-color: black;
}
Then in your component, use these variables
component.scss
button
{
cursor: pointer;
padding: 10px;
border: 0;
color:var(--button-color);
background-color:var(--button-background);
}
Then, when you dynamically load the light theme, it will override the existing variables. If you then dynamically remove light-theme.css, it'll go back to using your dark theme's variables.

How to manipulate css code line by time?

My question is, how to manipulate this line in css by time with like a javascript code, for an other image? Like a slideshow!
If it's only possible in that way, in another code language.
.header { background: url(../img.jpg); }
You can use jQuery's css function to do it:
$(".header").css("background", "../img/bg2.jpg");
You have to add background property into style attribute. because you have no chance go to css file via js

Using LESS, how do I reference a class in the separate font-awesome .less file?

Background
I am using Twitter Bootstrap LESS source with LessJS
I'm using font-awesome.less (referenced from within Bootstrap.less)
I've removed the icons section from bootstrap so they don't conflict.
I have a site.less file which I also reference from within Bootstrap that contains some site-specific styling.
Goal
I would like to be able to do something along the following lines in my site.css file:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
Problem
When I try the approach above, I get the following error:
This error makes sense; I'm just not sure how best to correct it without creating an additional import of font-awesome.less in my site.less (which I imagine would be its own issue).
To clarify: Per comments below: I have a class name that I'm using from a Knockout viewmodel. (for example, if "Praise" is selected, it will apply the class "FeedbackItemPraise"). If FeedbackItemPraise is selected, I'd like it to apply the .icon-thumbs-up class from font-awesome (which displays the icon via a web font) and then also make the color green.
What I have so far
Bootstrap.less customization (only relevant parts shown):
//Sean's customizations
#import "background.less"; // Background images and colors
#import "font-awesome.less"; // Font Awesome font (SK 2012/09/04)
#import "site.less"; // site-specific LESS
Class within site.less:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
UPDATED
Upon looking at Font-Awesome again, looks like they have now included mixins for the icons. See the following two files.
https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less
https://github.com/FortAwesome/Font-Awesome/blob/master/less/mixins.less
Use like:
.feedbackItemIconPraise
{
.icon(#thumbs-up-alt)
color:Green;
}
ORIGINAL
If you look at font-awesome.less you will see that class doesn't exist, it's actually .icon-thumbs-up:before. Unfortunately you can't use pseudo classes as mixins, eg .icon-thumbs-up:before;.
You will need to modify your font-awesome.less file (or just add this class, or just put content: "\f087"; directly where it needs to go) so there is a non :before version:
.icon-thumbs-up:before { content: "\f087"; }
.icon-thumbs-up { content: "\f087"; }
Then apply this concept:
.feedbackItemIconPraise {
font-family: "FontAwesome";
font-size: 90px;
padding-top: 7px;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
&:before {
.icon-thumbs-up;
}
}
Seems Font-Awesome icons have to use the :before pseudo for them to show up.
Demo: http://pulse-dev.com/files/stackoverflow/fontawesomeclass/
There may be another solution to this, but I combine my scripts into a single file (automatically) before running it through the LESS compiler. This allows me to define variables and mixins up front that can be used in any of my LESS files.
The online documentation does mention that LESS can include the #import files, making the variables and mixins available. You may need to ensure that you are on the latest version of the compiler and if the import files are organised in a folder structure, you may need to tell the compiler where to search.
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for #import directives
filename: 'style.less' // Specify a filename, for better error messages
});

Change the color of "a" tag inside of "li"

I've tried to do it by css, using:
#mainmenu ul li:hover a
{
color: #000000;
}
But it is not working, then i tried using jQuery, with:
function change()
{
$(this).find('a').css('color','#000000');
}
Calling onMouseOver inside the <li>, but it is also not working...
Any idea?
Try with color: black !important and if it works then look for the style overriding it and re-organize your code.
The CSS code posted works when tested with the simplest possible HTML like
<div id=mainmenu>
<ul><li><a href=foo>link</ul>
</div>
and with no other style sheet used. This means that in your real page, there is either some error in HTML syntax or, more probably, some other style sheet rule that overrides this rule.
Thus, you should analyze and modify the style sheets. If you need further help, you should post minimal code that still exhibits the problem.
Using !important can be useful in making sure that it’s not an HTML problem or typo in CSS code, but !important should rarely be used on live pages, especially in cases where you don’t really know how your style sheets work together.
Just try hovering
#mainmenu ul li a:hover
{
color: #000000;
}
I think CSS can handle your problem anyway if you want to solve using jquery you can use this link Jquery Hyperlink Plugins

Categories