Sass Mixin for Background Transparency Back to Ie8

Sass mixin for background transparency back to IE8

@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}

NOTE: The ie-hex-str is only available in recent versions, not sure when it was introduced though

Sass - Converting Hex to RGBa for background opacity

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" */

how do I use a filter: for ie8 that won't affect ie9?

This is what ended up working for me, basically turning off the filter for IE9. I'm not happy with this solution, but it's going to have to do for now.

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important; /* ie9 requires quotes */

making node sass generate a class but also a mixin?

got it,

so I aggregate all tokens in a map of maps.

and then I can do this:

@mixin u($prop, $value: null) {
  @if ($prop and $value) {
      #{$prop}: get-tokens($tokens, $prop, $value);
  } @else {
    .u-#{$prop} {
      @each $item, $value in map-get($tokens, $prop) {
        &-#{$item} {
          #{$prop}: $value;
        };
      }
    }
  } 
}

tokens:

$tokens:(
  border-color: $color,
  color: $color,
  background-color: $color,
  font-size: $font-size,
  font-weight: $font-weight,
  font-family: $font-family,
);

@function get-tokens ($map, $keys...) {
  @if type-of($map) != 'map' {
    @error 'The argument $map: `#{$map}` is of incorrect type: `#{type-of($map)}`. Type of `Map` is required!';
  }

  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

Change CSS RGBA color based on main template color in SASS

Change your mixin like this to genarate the RGBA from your $template-color:

@mixin box-shadow($amount, $blur, $spread, $opacity, $template-color) {
  $red: red($template-color);
  $blue: blue($template-color);
  $green: green($template-color);
  box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
  -webkit-box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
  -moz-box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
}

Update:

I have found that the rgba function accepts two patameters (color and opacity) and you can do this simpler:

@mixin box-shadow($amount, $blur, $spread, $opacity, $template-color) 
{
  box-shadow: $amount $blur $spread rgba($template-color, $opacity);
  -webkit-box-shadow: $amount $blur $spread rgba($template-color, $opacity);
  -moz-box-shadow: $amount $blur $spread rgba($template-color, $opacity);
}

Sass Mixin Error for IE specific filters like -ms-filter

Solved it like this, but still looking for alternative suggestions on the best way...

=default_button(!lighter, !darker) 
  text-shadow= 1px 1px 3px darken(!darker, 8)
  border= 1px !darker solid
  background-color= !lighter
  background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, !darker
  background= -moz-linear-gradient(90deg, !darker, !lighter) repeat-x scroll 0 0 !darker
  -ms-filter = "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{!lighter}', endColorstr='#{!darker}')"
  :zoom 1
  :margin 0 0 0 0
  :width auto

The syntax for Sass has changed since this answer was originally posted. The modern sass (indented) syntax looks like this:

=default_button($lighter, $darker) 
  text-shadow: 1px 1px 3px darken($darker, 8)
  border: 1px $darker solid
  background-color: $lighter
  background: -webkit-gradient(linear, 0 0, 0 100%, from($lighter), to($darker)) repeat-x, $darker
  background: -moz-linear-gradient(90deg, $darker, $lighter) repeat-x scroll 0 0 $darker
  -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$lighter}', endColorstr='#{$darker}')")
  zoom: 1
  margin: 0 0 0 0
  width: auto

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;
}

---

Related Topics