Search code examples
csssasscompass-sass

how would one create different drop shadow sizes in SASS?

I know this is not gonna be used in any practical way, but how would one create different drop shadow sizes? 

 .item-title a {
    display: inline-block;
    color: $some_lovely_button;
    box-shadow: $some_boxshadow_love px;
 }

Can I actually make a space after the variable? Will it be able to read now if i parse e.g. 5 to the variable, then it will put 5 px; Obviously, if I put $some_boxshadow_lovepx it's a whole different variable. I hope what i want to achieve is clear :D Thanks!

Solution

  • You can use concatenation or interpolation methods.

    .item-title a {
    display: inline-block;
    color: $some_lovely_button;
    box-shadow: #{$some_boxshadow_love} px;
    box-shadow: {$some_boxshadow_love} + px;
     }