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));
Related
I need to see if there is a way to parse out variables that are effectively, dynamically generated.
I have a list of 'color' definitions from a variables.scss file in my application:
$colorsList: "primary" "success" "info" "warning" "danger" "inverse";
I then have a number of variables that map to various colors:
$primary-color: #558bc3 !default;
$success-color: #259d2c !default;
$info-color: rgba(43, 169, 251, 0.39) !default;
$warning-color: #FAAA00 !default;
$danger-color: #c82e2d !default;
$inverse-color: #000;
I am trying to create an SCSS page that will effectively create some generated color blocks/css rules:
#each $color in $colorsList {
$col: "$color-#{$color}";
$bgcol: "$color-#{$color}";
.bg-#{$color} {
background-color: "#{$bgcol}";
}
.color-#{$color} {
color: "#{$col}";
}
}
This results in the following output:
.bg-primary {
background-color: "$color-primary"; }
.color-primary {
color: "$color-primary"; }
.bg-success {
background-color: "$color-success"; }
Essentially, what I would like to do - is have those variables in the output parsed to the variable values: $color-success gets changed with #259d2c, and so forth.
Is there a way to do this? Or maybe some workaround?
No, what you are trying is not possible, at least so for. A SCSS variable will be interpreted only once, as you can read on the official documentation:
Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself
So when you call background-color: "#{$bgcol}", $bgcol gets replaced by its value, which is just a string in the eye of SCSS, as any interpolated result:
Interpolation can be used in SassScript to inject SassScript into unquoted strings. This is particularly useful when dynamically generating names (for example, for animations), or when using slash-separated values. Note that interpolation in SassScript always returns an unquoted string.
What you can do that's common in the SCSS world is to map your color names to your colors with the help of a map, like so:
#use "sass:map";
$colorsList: "primary" "success" "info" "warning" "danger" "inverse";
$mapedColorsList: (
"primary": #558bc3,
"success": #259d2c,
"info": rgb(43 169 251 / 39%),
"warning": #faaa00,
"danger": #c82e2d,
"inverse": #000,
);
#each $color in $colorsList {
.bg-#{$color} {
background-color: map.get($mapedColorsList, $color);
}
.color-#{$color} {
color: map.get($mapedColorsList, $color);
}
}
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);
I am trying out CSS variables and I would like to use RGB colours.
Here's my current CSS Variable:
--primary: rgb(112, 199, 255);
So this works absolutely fine when using the following code:
color: var(--primary)
But some paragraphs also use this primary colour and I would like to give them a slight transparency. Now I could replace that and create another CSS Variable like so:
--primary: rgb(112, 199, 255);
--primary-alpha: rgba(112, 199, 255, 0.7);
But that just feels messy and confusing having two primary colours and what If I use a few different transparencies. I could also use the following CSS Variable:
--primary: 112, 199, 255;
--alpha: 0.7;
and output it using the following code:
color: rgba(var(--white), var(--alpha));
This works as I want and I personally think is a nicer way of doing it but my colours don't preview in my code editor see image.
Look at the --dark variable, it won't show the colour using this code.
Ideally, I would like to use:
--primary: rgb(112, 199, 255);
and output it like so:
color: var(--white), var(--alpha);
But it won't work?
Assuming you're using atom-pigment. The color detection works within comments as well. So you could perhaps add the actual rgb value in the comments only for reference & use the variable as usual. Like so:
--dark: 18, 38, 51 /* this color is - rgb(18, 38, 51) */
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.
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().