CODEWITHSUNDEEP
sassscss-mixins
santa
santa

Reputation: 12512

Dynamic font sizing with SCSS

Is it possible to set the font size relative to another element's font size using only SCSS and not JS?

For example, I want to get paragraph text 2 pixels smaller then input.

I've attempted something like this but it does not seem to work:

HTML

<input type="text" value="This is input text">
<p>Text smaller then input</p>

SCSS

$isize: 16px;
$psize: $isizev - 2;

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

Upvotes: 0

Views: 2156

Answers (2)

Webnatural
Webnatural

Reputation: 26

We can also rely on the browser calc() function as per: https://caniuse.com/#search=calc()

$isize: 16px;
$psize: calc(#{$isize} - 2px);

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

Upvotes: 1

Webnatural
Webnatural

Reputation: 26

Maybe using a function?

SCSS

@function ratioDimensions($factor:1, $base-dimension:16, $unit:px) {
  $calcSize: $base-dimension * $factor;
  @return #{$calcSize}#{$unit};
}

And then you can use:

SCSS

$isize: ratioDimensions(1);
$psize: ratioDimensions(1,16-2,px);

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

Upvotes: 0

Related Questions