When you assign a CSS var() variable to an Sass variable like this:
--color: #FFF;
$color: var(--color);
This will result in $color holding the var(--color) as a value. Is there a way so it would hold the actual CSS #FFF value? So $color would save the #FFF instead of var(--color)?
This would be great so you can use the css variables in more complex functions and media queries where var() isn't allowed.
Not possible directly, but an alternative is to keep the rgb or hsl value instead of a hex value.
--color: 129, 19, 29;
$color: rgb(var(--color));
You could specify 2 variables for each like below, to have both options available.
--color: #554784;
--color-rgb: 129, 19, 29;
Or just always use the rgb(a) notation
color: rgb(var(--color));
Is it possible to set opacity value in hex color independently (to avoid repetition), or to append to var() e.g. var(--set1)1?
Example:
:root {
--set1: #abc;
--set1-1: #abc1;
--set1-3: #abc3;
--set1-5: #abc5;
}
pre {
border-left: 4px solid var(--set1);
background-color: var(--set1-1);
}
In the near future and thanks to "relative color syntax" You can do the following
:root {
--set1: #abc;
--set1-1: rgb(from var(--set1) r g b / 80%);
--set1-3: rgb(from var(--set1) r g b / 50%);
--set1-5: rgb(from var(--set1) r g b / 30%);
}
You transform the color into an rgb() value then you set the transparency.
There is no browser support for the above. Until then, you have to manually write the colors or use Sass to generate them.
Related: How to create color shades using CSS variables similar to darken() of SASS?
I need to be able to use CSS variables because I need to have an hover effect (background-color) to be customizable by my VueJs app.
But my CSS stylesheet should have a default value, which is stored in a nested SCSS map. (map-getter is a function which returns values from nested maps)
I know that my SCSS code works, because I get the intended result when I do this:
.theme--dark .AppNavTile:hover {
background-color: map-getter($theme-dark, AppNav, hover);
//returns background-color: rgba(255, 255, 255, 0.87); in my browser's console
}
In order to use CSS variables, I can modify the code as follows:
.theme--dark .AppNavTile:hover {
--hover-bg-color: red;
background-color: var(--hover-bg-color);
}
It works fine and I have a red background when hovering the element.
Then I try to combine both:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
According to by browser's console, this returns the following:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
So it seems that the SCSS code remains uncompiled in the CSS variable. Is there any way around it?
Thanks!
The "problem" with CSS variables is they can have any value – why map-getter($theme-dark, AppNav, hover) is rendered as is. To instruct SCSS that this is actual SCSS code and not a random string you need to use interpolation (like if you use SCSS variables inside calc):
--hover-bg-color: #{map-getter($theme-dark, AppNav, hover)};
Is there any way to adjust only specific values using hsl? For example, if I only want to change the saturation or lightness and keep the hue the same?
.red {
background-color: #ff0000; /* or, hsl(0,100%,50%); */
}
.red-dark { // Adjust saturation +10% and lightness -15%
background-color: hsl(, +10%, -15%);
}
You'll need to use javascript or a css preprocessor like sass, as mentioned by Fran.
CSS is declarative and has no reference to previous condition with a few small exceptions. For the most part, it only executes what it is given.
Does LESScss convert all rgba colors to hex values?
I am trying to create a mixin, say, .color, that allows you to pass in a color variable previously defined, and I want it to be in rgba.
this doesn't work, but here's the idea:
.bgcolor(#colorvariable,#alpha) {
background-color: #colorvariable + rgba(0, 0, 0, #alpha);
}
Where #colorvariable would be, #blue: rgb(17,55,76); or #green: rgb(125,188,83); etc.
I want to define a bunch of these variables, and then be able to pass them in to .bgcolor or .color mixin and change the alpha transparency on the fly.
I feel like this should be possible, but I am missing something. -Right now, my code only ever outputs a hex color value, almost no matter what I input.- If I pass in an #alpha value of 1, it outputs a hex color value. Only #alpha values less than 1 force the browser to show me an rgba value. So that's solved.
Now--how to pass in the rgb and a parts separately from a predefined variable?
Turns out, less has hsla functions built in (see less color functions). So with some help, here's what we discovered:
#dkblue: #11374c;
.colorize_bg(#color: #white, #alpha: 1) {
background: hsla(hue(#color), saturation(#color), lightness(#color), #alpha);}
Then use the mixin:
section {.colorize_bg(#dkblue,1);}
So we pass in the color variable #dkblue and less' functions like hue(#color) take #dkblue and pull out its hue, saturation, and lightness values. We can then pass in an alpha that we define in that mixin.
Then I can use it in other ways, like to define transparent borders. By adding background-clip: padding-box; to .colorize_bg I ensure that my borders show outside of the bg box color (isn't CSS3 magical?) Then I can redefine the mixin to work for border color:
.colorize_border(#color: #white, #alpha: 1) {border-color: hsla(hue(#color), saturation(#color), lightness(#color), #alpha);}
and then give section the border width, style, and define color via the mixin:
section {border-width: 0 10px; border-style: solid; .colorize_border(#dkblue, .5);
And you'll get magical, shiny transparent borders, like so: http://i.stack.imgur.com/4jSKR.png
LESS has a set of functions to fade, fadeIn, or fadeOut a color. You should be able to pass any color to these mixins (hsl, rgb, rgba, hex, etc.)
// fade color to 40%
color: fade(#000000, 40);
// fade in color by 10%
color: fadeIn(rgba(0, 0, 0, .5), 10);
// fade out color by 10%
color: fadeOut(rgba(0, 0, 0, .5), 10);
You don't need to convert to hsla either so you won't need a white value
.hexBackgroundToRGBA(#color,#alpha){
#myred:red(#color);
#mygreen:green(#color);
#myblue:blue(#color);
background-color: #color;
background-color: rgba(#myred,#mygreen,#myblue,#alpha);
}
You'll have to write a few of these mixins in you need to set stuff other than the background-color property set but that's the idea. Just call it like this:
#selector{ .hexBackgroundToRGBA(#gray, 0.8); }
That will take whatever color val you have in the #gray variable and output a cross browser solution at 80% transparency with a solid color fallback for browsers that don't support rgba().