I receive a configuration JSON that has colors and the paths of the images that I must use in my CSS, I correctly set the variables in the html and it would have a result similar to this:
<html lang="en" style="
--c-logo-square:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/temp%20belike%20small.png;
--c-background-image:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png;
--c-primary:green;
--c-secondary:purple;">
I can use the color variables correctly, but I don't know how to use the image paths as background.
// Works
.my-html-component {
color: var(--c-primary);
}
// Error
logo {
background: url(var(--c-background-image));
}
When working with Angular and SCSS I understand that I could use some function that allows me to do what I need, but I don't know how to do it.
Instead of defining url in the attribute, define it as a part of the variable. Dont forget to add :root.
:root {
--c-background-image:url(https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png);
}
.logo {
background: var(--c-background-image);
width:500px;
height:500px;
}
<div class="logo"></div>
Related
I want to add internalization in my app. So I have a JSON file with all my values.
HTML side I manage to retrieve the values but css side I use a before.
In my HTML i use the class "menu-input" available right here :
<div class="header">
<app-game class="menu-input" [gameId]="gameId"></app-game>
<h1>{{'GAME.TITLE' | translate}}</h1>
</div>
This class is called in my scss file where I add a before :
.menu-input {
user-select: none;
display: block;
&::before {
content: 'Partie : ';
}
For the moment the content of my before is not yet translated. The goal is to transform my content with the value {{'GAME.NAME'}}
You can use css variables to solve this.
Working example: https://stackblitz.com/edit/angular-oaxdve?file=src%2Fapp%2Fapp.component.html
Taking in account reusability, you can define variables in your styles.css / scss:
:root {
--custom-text: 'Default';
--custom-text-2: 'Default';
}
And in your local css file you make use of the above variables like:
div::before {
content: var(--custom-text);
}
Then on app load or language change you get your translated text and go over the list of 'custom-text' options and set them using:
document.documentElement.style.setProperty('--custom-text', "'Hello'");
Let's assume that the user can add styles for every component in admin panel and I get it as string in my Node server:
const stylesFromAPI = ".p { color: red } .bg { background: lime }";
How to prefix this styles before append to my document to avoid conflicts?
I need something like CSS modules but working with strings (not as module loader):
const stylesFromAPI = css(".p { color: red } .bg { background: lime }"); // returns hashedClassname685946898456
<SomeCompontent className={stylesFromAPI} />
produces:
<style>
.hashedClassname685946898456 .p { color: red }
.hashedClassname685946898456 .bg { background: lime }
</style>
<div class="hashedClassname685946898456"></div>
Shadow DOM seems like a reasonable option here. You can create your style tags with inside the shadow DOM without having to deal with any selector prefixes. For example, using the react-shadow package:
import root from 'react-shadow';
Then in JSX, something like:
<root.div>
<style type="text/css">
{/* CSS string here */}
</style>
<div>
{/* Stuff here */}
</div>
</root.div>
Check out a working example of this here: https://github.com/joshdavenport/stack-overflow-61566764-react-css-shadow-dom
The main downside here is your styles from outside the shadow DOM will not apply. Those using the shadow DOM for components see this as a good thing, those simply trying to scope CSS do not. Not sure what it is you're scoping, so I can't really tell if that would be an issue for you.
If it is, you could re-import your styles within the shadow DOM, though I can't really point out how to do that without knowing what bundler is in use and how it is in use.
Alternatively you could pull apart your imported CSS using the css package, iterate over the selectors prefixing all with a randomly generated class, and then re-stringify.
I am using #ngx/translate core for lang change.
I want to define sass on the basic of
<body lang="en">
or
<body lang="fr">
by if else condition.
Inside my component sass i want to do something like this
#if( bodylang = en)
/these rules
else
// these rules
How can i achieve this?
As it is SCSS you are able to use CSS attribute selectors for this, for example:
a[target="_blank"] {
background-color: yellow;
}
Which in your case would be:
body[lang="en"] {
// Your code
}
body[lang="fr"] {
// Your code
}
You can also nest them like such:
body {
background-color: orange;
&[lang="en"] {
background-color: blue;
}
}
This selector is more specific than just referring to the body tag itself. This means that it will apply the regular body CSS if none of the matching langcode tags are found. You can find more attribute selectors here: https://www.w3schools.com/css/css_attribute_selectors.asp
If you want to do it in your component SCSS file you have to do something like bellow code:
:host-context([lang="en"]){
// Your code
}
:host-context([lang="fa"]){
// Your code
}
If you are doing it in your styles.scss file you can achieve your goal with following code:
[lang="en"] {
// Your code
}
[lang="fr"] {
// Your code
}
rsangin's answer is the correct one.
If you want to select every language that is not en, you can just use :not([lang="en"])
I am having list of css files and every css file has different image location code written like url(../_images/headerImages.jpg), now I am placing my images to some other domain therefore I want to create a variable like var domainPath = http://sitename.com so that at every url(../) I could write something like url(domainPath+ '/images/headerImages.jpg').
Example
var DOMAIN_PATH = http://www.mysite.com;
#header {background: url(DOMAIN_PATH/_images/headerimage.jpg)no-repeat; }
Please help me..
You cannot use variables in plain CSS. I suggest using a CSS preprocessor which is a language that compiled to CSS. SASS is fantastic and you can do what you ask like so:
$domainpath: url(http://www.mysite.com/_images/bg-header-noodletools-express.jpg);
#header {background: $domainpath no-repeat; }
Another alternative is LESS.
As mentioned in https://ishadeed.com/article/css-vars-101/ and others, it is possible to use variables in CSS now.
You can do:
:root {
--domainpath: url(http://www.yourdomain.com/_images/bg-header-noodletools-express.jpg);
}
#header {
background: var(--domainpath) no-repeat;
}
Unfortunately, CSS is not dynamic but you can do something like this:
store your URLs in the: root selector Which represents the root element and is identical to the selector html, except that its specificity is higher.
use the URL variable
:root {
/* define your variables here */
--url1: url(http://sitename.com/image1);
--url2: url(http://sitename.com/image2);
}
.img {
background-image: var(--url2);
width: 200px;
height: 200px;
}
Full source code: here
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');