2

How would I combine two variables in SASS to form a single unit? The setup is as follows:

$font-size: 16;
$font-unit: px;

$base-font-size: {$font-size}{$font-unit} !default;

@if unit($base-font-size) != 'px' { @warn "Parameter must resolve to a value in pixel units."; }

This throws a compile error: Invalid CSS after ... expected expression ... was

Thanks for the help!

sbay
  • 435
  • 1
  • 7
  • 20

1 Answers1

3

Try this instead:

$font-size: 16;
$font-unit: 1px;

$base-font-size: $font-size * $font-unit !default;

@if unit($base-font-size) != px { @warn "Parameter must resolve to a value in pixel units."; }
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Well, this does work, but for the sake of the original question is it possible to concatenate two variables as defined? – sbay Feb 14 '13 at 21:50
  • 1
    The original sample is missing the `#`, it should be: `$base-font-size: #{$font-size}#{$font-unit}`. However, when you concatenate them like that, you're actually getting a string and calling the unit function on it throws an error: "16px" is not a number for `unit'. – cimmanon Feb 14 '13 at 22:02
  • 1
    cimmanon, you are right, I did leave off the hash sign and was not able to form a string. And yes, the error is due to type mismatch. The question was more of a lead-in to see if such an action was possible. Thanks for a quick reply! – sbay Feb 14 '13 at 22:13
  • This answer should be edited, it is not working. – Vladimir Jovanović Jan 22 '20 at 10:14