Sass - Converting Hex to RGBa for background opacity

Question

I have the following Sass mixin  which is a half complete modification of an RGBa example    mixin background-opacity  color   opacity   3        background  rgb 200  54  54      The Fallback        background  rgba 200  54  54   opacity        I have applied  opacity ok  but now I am a stuck with the  color part   The colors I will be sending into the mixin will be HEX not RGB   My example use will be   element        include background-opacity  333   5       How can I use HEX values within this mixin

User · Answer

SASS has a built-in rgba   function to evaluate values    rgba  color   alpha    E g   rgba  00aaff  0 5    gt  rgba 0  170  255  0 5    An example using your own variables    my-color   00aaff   my-opacity  0 5    my-element     color  rgba  my-color   my-opacity       Outputs    my-element     color  rgba 0  170  255  0 5

User · Answer

If you need to mix colour from variable and alpha transparency  and with solutions  that include rgba   function you get an error like        background-color  rgba    color   0 3                                   color   002366 is not a color                   background-color  rgba    color   0 3                                                         Something like this might be useful    meeting-room-colors      Neumann    002366     Turing    FF0000     Lovelace    00BFFF     Shared    00FF00     Chilling    FF1493       color-alpha  EE    each  name   color in  meeting-room-colors          name          background-color     color    color-alpha

User · Answer

There is a builtin mixin  transparentize  color   amount    background-color  transparentize  F05353   3     The amount should be between 0 to 1   Official Sass Documentation  Module  Sass  Script  Functions

User · Answer

you can try this solution  is the best      url github      Transparent Background    From  http   stackoverflow com questions 6902944 sass-mixin-for-background-transparency-back-to-ie8     Extend this class to save bytes  transparent-background     background-color  transparent    zoom  1        The mixin  mixin transparent  color   alpha       rgba  rgba  color   alpha      ie-hex-str  ie-hex-str  rgba      extend  transparent-background    background-color   rgba    filter progid DXImageTransform Microsoft gradient startColorstr    ie-hex-str  endColorstr    ie-hex-str          Loop through opacities from 90 to 10 on an alpha scale  mixin transparent-shades  name   color       each  alpha in 90  80  70  60  50  40  30  20  10           name -   alpha           include transparent  color   alpha   100                   Generate semi-transparent backgrounds for the colors we want  include transparent-shades  dark    000000    include transparent-shades  light    ffffff

User · Answer

The rgba   function can accept a single hex color as well decimal RGB values  For example  this would work just fine    mixin background-opacity  color   opacity  0 3        background   color     The Fallback        background  rgba  color   opacity      element         include background-opacity  333  0 5       If you ever need to break the hex color into RGB components  though  you can use the red    green    and blue   functions to do so    red  red  color    green  green  color    blue  blue  color    background  rgb  red   green   blue      same as using  background   color

[css] Sass - Converting Hex to RGBa for background opacity

Examples related to css

Examples related to sass

Examples related to background-color

Examples related to mixins

Examples related to rgba