Kevin Powell - Community•2y ago

Super quick question about clamp and sass

I want to be able to evaluate the resulting clamp value and put a negative on it. -#{$height} doesn't work since it evaluates in the browser to -clamp(1rem, 2vw, 2rem). You'll probably say to just use media queries (😉) but I want it to be fluid.

 &::before {
    $height: clamp(1rem, 2vw, 2rem);
   
    inset: -$height 0 auto 0;
    height: $height;
  }
}

 &::before {
    $height: clamp(1rem, 2vw, 2rem);
   
    inset: -$height 0 auto 0;
    height: $height;
  }
}

2 Replies

Kevin Powell•2y ago

Haven't tested it out, but I think this would work:

 &::before {
    $height: clamp(1rem, 2vw, 2rem);
   
    inset: calc($height * -1) 0 auto 0;
    height: $height;
  }
}

 &::before {
    $height: clamp(1rem, 2vw, 2rem);
   
    inset: calc($height * -1) 0 auto 0;
    height: $height;
  }
}

vinceOP•2y ago

Ah that's so simple why didn't I think of that! Thanks I'll have to test it too and see but that does look like it would work Hey that worked, nice! Thank you 🙂

Gaming

Programming

Super quick question about clamp and sass