I have a SASS variable, $active-color: #a16117
Now I want to use that in a RGBA value so I created to RGB value of that variable like so, $active-color-rgb: 161,97,23, and I tried to use it like this,
border: 2px solid rgba($active-color-rgb 0.8) but SASS throws this error
error 2-basics/buttons.sass (Line 10: wrong number of arguments (1 for 4) for `rgba')
I believe it's failing on the commas. Any ideas on how to remedy this?
With SASS you can use HEX for the color, no need to translate to RGB.
$active-color: #a16117;
border: 2px solid rgba($active-color, .8);
If you indeed want to translate to RGB though, then just do:
$active-color-rgb: rgb(161,97,23);
border: 2px solid rgba($active-color-rgb, .8);
JsFiddle Example:
https://jsfiddle.net/yvnoueb3/1/
You van view more details on the SASS docs:
http://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method
Try this:
// Declare the color as RGB; SASS will treat this as hex
$red: rgb(255,0,0);
// Declare an alpha
$alpha: .5;
// Declare another color variable as a color with an alpha
$redAlpha: rgba($red, $alpha);
Related
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));
I have some variables to easily define the color of my webapp, something like this:
:root {
/*Variables for color style*/
--main-bg-color: rgba(243, 243, 243, .7) !important;
}
The problem is that I.E. is not handling it. I solved it using preprocessor varialbes like this:
$main-bg-color: #fff
However, preprocessor variables can't handle rgba colors... Is there any way to store my rgba (without using one variable for each r, g, b, and alpha channel)?
rgba not working in IE 6 & 7 (fixed in IE 8).
Try this:
:root {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
This may help you.
I'm developing a project using LESS as compiler for my CSS.
I have already a fully working loop that sets the background color properly.
My question is this:
With my current code, when i try to use darken property, the compiling result is this:
SyntaxError:error evaluating function darken: Object # has
no method 'toHSL'
and the code is this one:
#colors:
"008B8B",
"00CDCD",
"00EEEE";
/* Colors and background loop (based on colors.less arrays) */
.loop-colors(#index) when (#index > 0){ // loop to generate rules for each color
.loop-colors(#index - 1);// call for the next iteration
#color: e(extract(#colors, #index));
#hexColor: ~'##{color}';
#border: 1px solid darken(#hexColor, 5%);
&.col-#{color}{
background: #hexColor;
border:#border;
}
}
i have no idea why this is not good.
I mean, i think is because the list of color doesn't have the "#" before every color, but just because i'm using it on the css class as well, i can't add it to #colors, so i have to add it later.
I don't know if and why adding the "#" later will affect the darken property and how.
Thanks
As mentioned by #seven-phases-max, ~'##{color}' will not create a color but a string. To convert a string to a color, you can use color function.
#colors:
"008B8B",
"00CDCD",
"00EEEE";
/* Colors and background loop (based on colors.less arrays) */
.loop-colors(#index) when (#index > 0) { // loop to generate rules for each color
.loop-colors(#index - 1);// call for the next iteration
#color: e(extract(#colors, #index));
#hexColor: ~'##{color}';
#border: 1px solid darken(color(#hexColor), 5%);
&.col-#{color} {
background: #hexColor;
border: #border;
}
}
I'm developing a project using LESS as compiler for my CSS.
I have already a fully working loop that sets the background color properly.
My question is this:
With my current code, when i try to use darken property, the compiling result is this:
SyntaxError:error evaluating function darken: Object # has
no method 'toHSL'
and the code is this one:
#colors:
"008B8B",
"00CDCD",
"00EEEE";
/* Colors and background loop (based on colors.less arrays) */
.loop-colors(#index) when (#index > 0){ // loop to generate rules for each color
.loop-colors(#index - 1);// call for the next iteration
#color: e(extract(#colors, #index));
#hexColor: ~'##{color}';
#border: 1px solid darken(#hexColor, 5%);
&.col-#{color}{
background: #hexColor;
border:#border;
}
}
i have no idea why this is not good.
I mean, i think is because the list of color doesn't have the "#" before every color, but just because i'm using it on the css class as well, i can't add it to #colors, so i have to add it later.
I don't know if and why adding the "#" later will affect the darken property and how.
Thanks
As mentioned by #seven-phases-max, ~'##{color}' will not create a color but a string. To convert a string to a color, you can use color function.
#colors:
"008B8B",
"00CDCD",
"00EEEE";
/* Colors and background loop (based on colors.less arrays) */
.loop-colors(#index) when (#index > 0) { // loop to generate rules for each color
.loop-colors(#index - 1);// call for the next iteration
#color: e(extract(#colors, #index));
#hexColor: ~'##{color}';
#border: 1px solid darken(color(#hexColor), 5%);
&.col-#{color} {
background: #hexColor;
border: #border;
}
}
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().