23

Consider the following sass:

$font-size: 18;                 
$em: $font-size;

$column: $font-size * 3;        // The column-width of my grid in pixels
$gutter: $font-size * 1;        // The gutter-width of my grid in pixels

$gutter-em: #{$gutter / $em}em; // The gutter-width in ems.
$column-em: #{$column / $em}em; // The column-width in ems;

$foo = $gutter-em / 2; // This results in a value like "1em/2". :(
$bar = ($gutter-em / 2); // this doesn't work either, same as above.

How can I generate a $foo that works, and that I can reuse further in other expressions?

Mateen Ulhaq
  • 24,552
  • 19
  • 101
  • 135
Idan Gazit
  • 2,500
  • 3
  • 20
  • 24

1 Answers1

30

Sass cannot perform arithemetic operations on strings, only concatenation. When you use interpolation, what you've created is a string that looks like a number:

@debug type-of(#{10px});         // string
@debug type-of('10px');          // string
@debug type-of(unquote('10px')); // string
@debug type-of(10px);            // number

If you want a number, do not use interpolation and do not use quotes. For converting an integer (eg. 10) to a length (eg. 10px), use multiplication:

$gutter-em: ($gutter / $em) * 1em;
@debug type-of($gutter-em);      // number
cimmanon
  • 67,211
  • 17
  • 165
  • 171
Hauleth
  • 22,873
  • 4
  • 61
  • 112
  • 1
    Man, I feel stupid for not seeing this. Thanks for the speedy answer! – Idan Gazit Nov 24 '11 at 11:28
  • What about interpolating colors? For example, 3 is my loop iterator and I want to make a style that says background-color: #333; How do I put the # without converting it to a string? – Sagar Mar 17 '19 at 17:45