There is a way to specify the usage of variables only for certain properties.
It is used to not overwrite say a padding with a color variable.
So if you would declare a variables like this:
--myColor: red
you could not use the variable in a padding like this:
.p {
/* should NOT be possible */
padding: var(--myColor);
}
Could someone help me out with the name of this feature, please?
So, basically the code will be more complex then --myColor: red.
I think I remember something like an object structure (but I might be wrong):
myColor { color: red; elements: color }
I found the answer, see here explanations https://youtu.be/3IUxyBx_PnM?t=1660
CSS.registerProperty({
name: "--stop-color",
syntax: "<color>",
inherits: false,
initialValue: "black"
})
it's actually Houdini CSS
Related
Currently, I've a list of colors (for example):
#colors: {
base: #716aca;
brand: #716aca;
danger: #c14549;
warning: #ffb822;
success: #34bfa3;
primary: #5867dd;
black: #000000;
}
I have each function that iterates over all the colors and makes all the possible rule colors that we can use:
each(#colors, .(#value, #key, #index) {
.rules-here-#{key} {
attribute: #value;
}
}
What I can't make work is something like this:
.getColor(#color);
Where I would use on other places, like:
div.system-warning-notification {
background-color: .getColor('base');
color: .getColor('danger');
}
I have no idea if this is even possible. I have been losing my mind over this for over a week now without any progress.
If that isn't possible, can I generate the variables so I can access them like:
#color-base: #716aca;
Without having to manually create them?
Thank you very much and I hope I asked this right. I am new here.
I am trying to dynamize color changing in my application built with react and CSS modules. I want to display complementary colors based on one color for each time.
To do that I defined my colors manually
style: [
{
toolbarColor:'#c80eff',
centerWidgetColor:'#0040ff',
buttomWidgetColor:'#0040ff',
rightWidgetColor:'#ffbf00',
},
{
toolbarColor:'#c80eff',
centerWidgetColor:'#fab81e',
buttomWidgetColor:'#00ff9c',
rightWidgetColor:'#12b274',
},...
But it is a long work to do and it is impossible to define all the cases.
For that, my question is, is there any equation to get complementary colors, shades, etc based on one color reference ( hex or rgb )
You can do it in two ways:
CSS
For all CSS, use variables and mixins ( for more information read this article: http://thesassway.com/intermediate/mixins-for-semi-transparent-colors ) but for that code:
$color00: #c80eff;
$color02: #0040ff;
$color03: #00ff9c;
Defining your colors will always create consistency. Then, create a mixin of the like similar to:
```
#mixin alpha-background-color($color, $background) {
$percent: alpha($color01) * 100%;
$opaque: opacify($color, 1);
$solid-color: mix($opaque, $background, $percent);
background-color: $solid-color;
background-color: $color02;
}
```
Finally, you would apply to your item:
```
.button {
#include alpha-background-color(rgba(black, 0.5), white);
}
```
Otherwise, you can do that with JS:
set your variable for the color
$color00: #c80eff;
set a trigger in the button
<button onClick="changeColor()" > Change color </button>
set the function, something on the lines of :
const changeColor = ( opacity) => {
const b = document.querySelector('.button');
let colorChange = b.style.backgroundColor;
// change opacity
b.style.opacity = `${opacity}`;
}
changeColor('set here the opacity you would want');
document.querySelector('.button').addEventListener('click',
changeColor);
Summary and suggestion:
However, any good project will have some defined color palette and styles, if you set those up in variables in CSS then you simply re use them everywhere else in the project. Otherwise it will end up being inconsistent.
Dynamic CSS Background Color
If you're using a framework like Vue and you are receiving your data from a database that contains stuff like the colors etc, you could either have specific classes but that gets tedious...
I recently found that you could pass a css variable to your html as a style property and then use that variable in your css...
Of course, this needs to be edited to change the below red to a variable of your choosing, this is just the concept.
<style>
.myDiv {
height: 200px;
width: 200px;
background: var(--backgroundColor);
}
</style>
<div class="myDiv" style="'--backgroundColor: red;'>Some block</div>
From here, you would use Javascript to either change the value of your css variable with the below
const root = document.querySelector(':root');
root.style.setProperty('--backgroundColor', 'blue');
Or in Vue logic simply dynamically change the value with something like this
<div class="myDiv" :style="'--backgroundColor: ' + backgroundVariable + ';'">
Some Block
</div>
I want to include a value from another class - and use this for something different:
I have this class:
.sourceClass {
color: red;
}
And I have this class:
.destinationClass {
border-color: ###should be the color from .sourceClass => red
}
is this possible? And how can I do that?
You tagged your post with "Sass". Are you using the Sass/SCSS preprocessor? If so, you'd declare and use a variable like this:
$myColor: red;
.sourceClass { color: $myColor; }
.destinationClass { border-color: $myColor; }
If you're not using Sass, you can read about native CSS variables - which are currently working in Firefox and Chrome, but not IE/Edge.
Lastly, there is a possible solution supported in all current browsers, which would be applicable depending on your DOM hierarchy: currentColor.
If your .destinationClass is a child of .sourceClass, and therefore is inheriting color: red, you could simply use border-color: currentColor to take that color and use it as the border color.
Hope this helps!
I'm trying to create a few dynamics classes width Less css.
The idea is use in html this class:
.color-white{
color: white !important;
}
I created this sintaxis in Less:
.change-color(#which; #color){
.color-#{which}{
color:#color !important;
}
.background-#{which}{
background-color:#color !important;
}
}
So, with this I want to take my idea :D
.change-color(#which: white; #color: white);
But, that is the problem, I have this:
.color-#ffffff{
color:#fff!important
}
.background-#ffffff{
background-color:#fff!important
}
How can I use "white" as string and not as hex color.
Thanks.
Call this way instead:
.change-color(#which: ~'white'; #color: ~'white');
Though I think it would be better to just create a class called .color-red explicitly rather than make things more unreadable for little reason.
I have two base CSS classes:
.smpb_color_gray {
color:#cccccc;
}
.smpb_font_size_18 {
font-size:18pt;
}
I wonder if it's possible to create one class which will contains both these classes? With name .smpb_my_combine_class and it must have color:#cccccc and fontSize:18pt.
I want to create one class and then use them on other classes.
Like I want to create:
.smpb_base_border_width{
border-width:1;
}
And then I want to create a class for other control, I want to just include this class, but not create a new class. It's needed if I want to change the default width in future.
If I make a change in the base, then I need that change in all classes.
In regards to JavaFX2, in the .root element you can define a property, such as -smpb-color-gray:#cccccc; and then reference that within another css class.
.root {
-smpb-color-gray: #cccccc;
-smpb-font-size: 18pt;
}
.smpb_my_combine_class {
-fx-text-fill: -smpb-color-gray;
-fx-font: -smpb-font-size;
}
I used -fx-text-fill because I didn't know exactly what you were trying to color.
Does that fit into your criteria?
try this
.smpb_font_size_18,.smpb_color_gray{
color:#cccccc;
font-size:18pt;
}
You can assign multiple classes to one html element like this
<div class="border black"></div>
but you cannot combine multiple classes in one as far as I know.
I haven't really looked into it much, but I think SASS might be able to do what you want.
If you mean using it like this:
.myclass {
.testclass;
}
than the answer is no unless you look into something like LESS.
It is:
.smpb_font_size_18,.smpb_color_gray{
/*whatever style for both*/
}
Basically, what you are asking is what Cascading Style Sheets are all about... Grouping Elements with the same top-level Classes or Ids together. The only thing you would have to do is to create your .smpb_my_combine_class and define the values like this:
.smpb_my_combine_class{
color:#cccccc;
font-size:18pt;
}
And then define your sub classes to replace the top-level class value with the default value like this:
.smpb_my_combine_class .smpb_color_gray{
font-size: medium; //The default value for font-size according to W3C
}
.smpb_my_combine_class .smpb_font_size_18{
color: black; //The default value of your Page font color?
}
So your .smpb_my_combine_class-classed elements will have those default values, as well as each class based on it. But keep in mind that this will only work if your subclass element is contained within an element of the .smpb_my_combine_class-class