5

I have a responsive Bootstrap page with fixed-size divs containing text. To avoid the text overflowing the div as it changes size, I'm using this solution with media queries to change the default font size.

However, the $font-size-base variable in the Bootstrap sass variables is still defined in terms of pixels and therefore stuff using it doesn't obey this scaling. I tried changing the font-size-base to 1em, but this cause a whole cascade of errors of Incompatible units: 'px' and 'em'.

I could basically overwrite the font sizes I need to be variable in my custom sass file, but this seems like kind of a kludgy approach. Is there a cleaner way that I can make Bootstrap use ems for the font size so that it will change according to my media queries?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Julia Ebert
  • 1,583
  • 1
  • 21
  • 39
  • 1
    Not sure what kind of answer you're looking for here. You can't perform arithmetic on values that are incompatible, that's just never going to be possible (1em can never be treated as anything other than equal to 1em. Sass knows this.). If you want to change units, you have to change every single instance where arithmetic is performed on that (or any other) variable. – cimmanon May 28 '15 at 20:49
  • So why can you do that with percentages but not ems? It's possible, for example, to do `calc(50% + 20px)`. – Julia Ebert May 28 '15 at 22:27
  • 2
    You can't? There is a world of difference between `$foo: 10px * 10%` and `$foo: calc(10px * 10%)`. The first won't compile (incompatible units) and the second contains a string. Since it contains a string it cannot be used for further calculations: `$bar: $foo * 2` raises an error because you can't do multiplications on strings. That's why you have a problem: there are calculations being performed on this variable that assume specific units. – cimmanon May 28 '15 at 22:45
  • This guy wrote a fix for bootstrap-sass not so long ago: https://gist.github.com/neil-h/631c5e848ba1f2ae92d1 – marksyzm Aug 21 '15 at 14:34

0 Answers0