KPC
Kevin Powell - Community•12mo ago
vince

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
Kevin Powell•12mo 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;
  }
}
vince
vince•12mo 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 🙂
Want results from more Discord servers?
Add your server
More Posts
Adding text over the top of an image with a "banner" behind ithttps://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-sign-up-form I'm being tMobile responsive site in inspection tab doesn't match live website appearanceI am developing my digital agencies website and for some reason a lot of the svg i have in the fileLearning SVG pathshttps://www.nan.fyi/svg-pathsTailwindcss +Next.j themes/libraries that meet AA WCAG standards and are semantically sound for SEO?Hey all, I have a client requiring a static landing page. It must meet at *least* AA (ideally AAATransition after hiding flex childI have 3 flex children in a row, set to 100% width, so it spaces evenly. Now, using js, I'm hiding oalign text and imageHi all, I'm currently working on the Workit landing page from frontendmentor, and everything is goiScrolling to an element with scrollIntoView or with a #I first used #'s to scroll but it doesn't center the element and it just stops at the start of elemeSizing of container on different zoom levelsHey guys, how can we manage the responsiveness when someone zoom in and out the screen. Is there anyWhy is it showing null?Uncaught TypeError: Cannot read properties of null (reading 'innerText') Getting this error, heres tCSS for Unifying Numeric ValuesI am almost certain that in one video @Kevin shared a tip for styling numeric values (i.e. money) in