Skip to content

Instantly share code, notes, and snippets.

@shhdharmen
Created February 20, 2019 08:52
Show Gist options
  • Save shhdharmen/1fe841d3bd07e6a7055806d5237f63b4 to your computer and use it in GitHub Desktop.
Save shhdharmen/1fe841d3bd07e6a7055806d5237f63b4 to your computer and use it in GitHub Desktop.
Below scss will help you to create rgba of all Bootstrap colors (and theme colors). Example : bg-light-rgba-1, text-dark-rgba-8, bg-primary-rgba-3, text-purple-rgba-5
// this will generate rgba colors from bootstrap colors and theme-colors
// examples : bg-light-rgba-1, text-dark-rgba-8, bg-primary-rgba-3, text-purple-rgba-5
// please ensure to import ~bootstrap/scss/bootstrap.scss before this file
$all-colors: map-merge($map1: $colors, $map2: $theme-colors);
$transparencies: (1:0.1, 2: 0.2, 3: 0.3, 4: 0.4, 5: 0.5, 6: 0.6, 7: 0.7, 8: 0.8, 9: 0.9);
@each $color in map-keys($all-colors) {
@each $alpha,
$opacity in $transparencies {
@each $prop, $abbrev in (background-color: bg, color: text){
.#{$abbrev}-#{$color}-rgba-#{$alpha} {
$main-color: map-get($map: $all-colors, $key: $color);
#{$prop}: rgba($main-color, $opacity) !important;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment