CODEWITHSUNDEEP
csssassrgba
MDc
MDc

Reputation: 33

SASS Text Shadow With Alpha

I'm relatively new to SASS and am trying to convert the following code into a SASS mixin to prevent having to write it all longhand. Can anyone help me? I've been working on it for two days and can't seem to get it to work, but like I said, I'm new to SASS. Here's the longhand CSS I'd like to change to a mixin:

text-shadow: 
1px 1px 0 rgba(0,0,0,0.50), 
2px 2px 0 rgba(0,0,0,0.49), 
3px 3px 0 rgba(0,0,0,0.48), 
4px 4px 0 rgba(0,0,0,0.47), 
5px 5px 0 rgba(0,0,0,0.46), 
6px 6px 0 rgba(0,0,0,0.45), 
7px 7px 0 rgba(0,0,0,0.44), 
8px 8px 0 rgba(0,0,0,0.43) 
[...and so on to about 50]

I was able to get a mixin that would generate the text-shadow depth, but when I try to adjust the alpha, I get warnings because the value goes beyond 1 and the opacity needs a value of between 0 and 1.

And here's the code I tried (which compiled fine, but outputted nothing):

@mixin render-shadow($depth){
    $longshadow: ();
    @for $i from 1 through $depth {
        @while $alpha > 0 {
            $alpha: 0.50;
            $longshadow: $longshadow, $i*1px $i*1px 0 rgba(0,0,0,$alpha);
        }
    }
    text-shadow: $longshadow;
}

I also tried: 

@mixin render-shadow($depth){
    $longshadow: ();
    @for $i from 1 through $depth {
        $longshadow: $longshadow, $i*1px $i*1px 0 rgba(0,0,0,($i - 0.01));
    }
    text-shadow: $longshadow;
}

Which gave me this error:

Syntax error: Alpha channel 1.99 must be between 0 and 1 for `rgba'

And:

@mixin render-shadow($depth){
    $longshadow: ();
    @for $i from 1 through $depth {
        $alpha: 0.50;
        $longshadow: $longshadow, $i*1px $i*1px 0 rgba(0,0,0,($alpha - 0.01));
    }
    text-shadow: $longshadow;
}

Which rendered the shadow but at a constant 0.49 opacity instead of incrementing to 0.

Upvotes: 2

Views: 942

Answers (2)

cimmanon
cimmanon

Reputation: 68319

The problem here is that you aren't effectively calculating the alpha changes.

In your first example, by the time you get to the 50th iteration, ($i - 0.01) is evaluating to 49.01. In your second example, you were never updating your $alpha variable, so it was always evaluating to .49.

You'll want to perform a calculation more like this:

@mixin render-shadow($depth, $alpha-start: 1, $alpha-step: 0.01) {
    $longshadow: ();
    @for $i from 1 through $depth {
        $longshadow: append($longshadow, $i * 1px $i * 1px 0 rgba(0, 0, 0, $alpha-start - ($i * $alpha-step)));
    }
    text-shadow: $longshadow;
}

.foo {
  @include render-shadow(50);
}

You will need to check to make sure that $alpha-start - ($i * $alpha-step) is not falling outside of 0 and 1 (which is entirely possible, depending on how many shadows you create and what your alpha start/step values are).

It is worth noting that as of Sass 3.4, alpha values are clamped (ie. you won't get this error anymore anyway).

Upvotes: 1

Jrn
Jrn

Reputation: 1235

You can use a loop for this, like so:

$i: 0.50;
$px: 1;

@while $i > 0 {
  .selector {
    text-shadow: #{$px}px #{$px}px 0 rgba(0,0,0, $i);
  }
  $i: $i - 0.01;
  $px: $px + 1;
}

Or if you want to use a mixin, you can do it like this:

@mixin text-shadow($start, $px) {
  text-shadow: #{$px}px #{$px}px 0 rgba(0,0,0, $start);
}

$i: 0.50;
$px: 1;

@while $i > 0 {
  .selector {
    @include text-shadow($i, $px);
  }
  $i: $i - 0.01;
  $px: $px + 1;
}

Hope this helps.

Upvotes: 0

Related Questions