Sass/Compass - Convert Hex, RGB, or Named Color to RGBA
Use the rgba
function built into Sass
Sets the opacity of a color.
Examples:
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)Parameters:
(Color) color
(Number) alpha — A number between 0 and 1Returns:
(Color)
Code:
rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
SASS Simple function to convert HEX color into RGB as a string without alpha
You can write the function like this:
@use "sass:color";
@function hex2rgb($hex) {
@return red($hex), green($hex), blue($hex);
}
But the problem is sass could not parse the variables for html custom properties.
So this line --color-body-bg-light: $color-bg-light;
won't work.
At the end, you will get this:
:root {
--color-body-bg-light: $color-bg-light;
--color-body-bg-light-rgb: $color-bg-light-rgb;
}
how to stop compass for converting rgba format to hex format
Sass will preserve the format of your color... unless it is in something other than the keyword, hex, or rgba formats.
If you want to absolute format, then you have to turn into string
For example : -
In scss variable file
$mercury-grey: #{'rgba(230, 230, 230, 1)'};
Input
.class {
color: $mercury-grey;
}
Output:-
.class {
color: rgba(230, 230, 230, 1);
}
Sass/Compass Mixin For Determining Color After Opacity/RGBA
To ensure that you're always working with positive numbers, you want to use the abs()
function:
@return rgba(abs($r1), abs($g1), abs($b1), $desiredAlpha);
Why does Sass change the format of my colors?
How Sass treats colors varies depending on what version you're using. But there are a few common behaviors:
- Sass will always maximize backwards compatibility whenever possible. Since keyword, hex, and rgba have the broadest browser support, all colors will be converted to one of those 3 formats, prioritizing towards either the keyword or hex. The rgba format will only be used if the color has alpha transparency (if you specify
rgba(0, 0, 0, 100)
, Sass will convert it to eitherblack
or#000
) - If Sass has to choose between using the keyword or hex formats, the one it will use will depend on the output settings. The compact or compressed modes will always convert to hex, the other formats will use the keyword.
- Sass will convert hex colors to their 3-digit format in compressed mode (eg.
#000000
will be output as#000
).
Sass 3.3 and older
Sass only converts colors when they are used as variables or if they are not in one of the 3 formats as described above:
$color-hex: #000000;
$color-keyword: black;
$color-rgb: rgb(0, 0, 0);
$color-hsl: hsl(0, 0, 0);
.box-hex {
color: $color-hex;
background: #000000;
}
.box-keyword {
color: $color-keyword;
background: black;
}
.box-rgb {
color: $color-rgb;
background: rgb(0, 0, 0);
}
.box-hsl {
color: $color-hsl;
background: hsl(0, 0, 0);
}
Output:
.box-hex {
color: black;
background: #000000;
}
.box-keyword {
color: black;
background: black;
}
.box-rgb {
color: black;
background: black;
}
.box-hsl {
color: black;
background: black;
}
Sass 3.4 and later
The only change from 3.3 to 3.4 is that when using variables, Sass will preserve the format of your color... unless it is in something other than the keyword, hex, or rgba formats.
.box-hex {
color: #000000;
background: #000000;
}
But what if I really need a specific format?
If you absolutely must have a specific format, you can turn it into a string:
$color: #{'#F00'}; // or `unquote('#F00')`
.foo {
color: $color;
}
Output:
.foo {
color: #F00;
}
Just keep in mind that when you do this, your "color" will not work with color manipulation functions like lighten()
or darken()
.
Print out current color hex value and variable name in sass color map
You can't. Variables don't work that way (not in Sass or any other language I am aware of). A variable is just a reference to a value, it doesn't understand what its name is. The only thing you can do is use a mapping (or list of lists for Sass versions older than 3.3).
$colors-list: (
brand: yellow,
secondary: blue,
accent: green,
base: orange,
alert: purple,
error: red
);
@each $name, $color in $colors-list {
.color-#{$name} {
background-color: $color;
color: white;
float: left;
height: 100px;
margin: 5px;
position: relative;
width: 100px;
&:after {
content: "hex value is #{$color} var name is #{$name}";
position: absolute;
top: 0;
left: 0;
z-index: 9999;
}
}
}
Can I turn off SASS RGB - Color Name
By default, Sass will not convert literal color values from their hex values unless you are forcing Sass to interpolate with #{}
or a variable.
Using interpolation will return the "to_sass" version of the value you're interested in. For example, #{ #fff }
will interpolate to "white". This also happens during variable replacements: color literals are translated to Color objects when used as variables, then "to_sass"ed into your stylesheet.
Furthermore, you may specify the style option compressed
, which will return the less byte-length version (i.e. red
instead of #f00
). Since white
is 5 characters long and #fff
is only 4, your rule will replace with #fff
instead.
There is no way to turn off the reverse HTML4 color name conversion when using variables. As a work-around, you can declare color variables as a string, then use then in styles with the unquote()
function.
$color: '#fff';
.white { color: unquote($color) }
Related Topics
Why Is Filter(Drop-Shadow) Causing My Svg to Disappear in Safari
How to Apply Child:Hover But Not Parent:Hover
How to Add a Custom Font to Rails App
Clip/Crop Background-Image with CSS
CSS Background-Position Not Working in Mobile Safari (Iphone/Ipad)
Urls Within CSS Files Broken with Grails Resources Plugin 1.2.7
Image Moves on Hover When Changing Filter in Chrome
Css3 Transitions on Pseudo-Elements (:After, :Before) Not Working
Ie - Hidden Radio Button Not Checked When the Corresponding Label Is Clicked
Stopping a CSS Animation But Letting Its Current Iteration Finish
How to Fix Internet Explorer 7 Bug When Using Percentage Widths for Layout
How to Override Stylesheets of Primefaces
Font-Weight CSS Transition in Chrome
CSS Layout, Use CSS to Reorder Divs
Slashes ('/') in CSS Values When Using Less (E.G. in 'Font' Shorthand)
Absolute Positioning in Gmail Emails
Perspective and Translatez Moves Diagonally
How to Include the Background-Cover Value in the Shorthand Background Property