Is there an option to include opacity on the colors you define to be your primary/secondary colors in the sass variables? In the fashion of the lighten($color, amount) function?
2
-
2Did you try searching the documentation first? sass-lang.com/documentation/Sass/Script/Functions.html– cimmanonCommented Jan 17, 2014 at 17:51
-
1opacify($color, 0.5)– GuyCommented Dec 4, 2021 at 11:49
Add a comment
|
1 Answer
You can use rgba, i.e.
$primary: rgba(20,20,20, .5);
It works for hex values as well
$primary: rgba(#4B00B5, .3);
You can also set the opacity of colors based on a variable value. For example:
$primary-color: #a61723;
....
color: rgba($primary-color, .5);
answered Jan 17, 2014 at 15:48
-
7Ok thanks this is useful, but not exactly what I was looking for. Maybe I phrased my question wrong, but I'm looking for a way to add opacity to a non-opaque primary color.– FuriCommented Jan 20, 2014 at 8:27
-
1Can you explain what you mean by "primary color", perhaps with some example code? Commented Jan 20, 2014 at 14:37
-
1For example my primary color is set to: $primary-color: #a61723; Now when I'm writing my css and I want to use it somewhere and I want it to have some opacity. Kind of like the lighten($primary-color, 10%). I'm wondering if this is possible with opacity.– FuriCommented Jan 21, 2014 at 12:17
-
14You use
rgbalike I said:color:rgba($primary-color, .5)Commented Jan 21, 2014 at 13:41 -
1@ZachSaucier that second colour is my new favourite hex code! ty Commented Sep 12, 2023 at 14:03