Menu
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?
491
With Sass, just wrap your color with rgba() and the opacity value as you would with normal CSS. Sass will take care of breaking down the color value into the correct RGB values.
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.
Sass Set Color Functions An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%). Sets a color using the Red-Green-Blue-Alpha (RGBA) model.
Sass SyntaxReturns a color with the given hue, whiteness, and blackness and the given alpha channel. The hue is a number between 0deg and 360deg (inclusive). The whiteness and blackness are numbers between 0% and 100% (inclusive). The hue may be unitless, but the whiteness and blackness must have unit % .
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); Demo
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
