Question

I want to add a conditional !important string to a definition without having to duplicate the lines… The closest I’ve come so far is this:

fontSize(size, isImportant = false)
  importantString=""
  if isImportant
    importantString = !important

  font-size unit(size, 'px') importantString
  font-size unit(size / 10, 'rem') importantString

which doesn’t work because importantString="" actually inserts "", and removing the assignment actually prints importantString if it isn’t defined.

The best way would be something like:

font-size unit(size, 'px') if isImportant !important

But I guess that’s not possible.

Answer 1

Answering your question — you can just use unquote() around the quotes for importantString, so it would output to nothing if there is no important.

That would look like this:

fontSize(size, isImportant = false)
  importantString = isImportant ? !important : unquote("")

  font-size unit(size, 'px') importantString
  font-size unit(size / 10, 'rem') importantString

However! if you’d ask me, I’d recommend to make something different — make a transparent mixin for font-size like this:

font-size(size, args...)
  $rem_ratio = 10 if not $rem_ratio is defined
  if unit(size) == 'rem'
    font-size unit(size * $rem_ratio, 'px') args
    font-size size args
  else if unit(size) == ''
    font-size unit(size, 'px') args
    font-size unit(size / $rem_ratio, 'rem') args
  else
    font-size arguments

That mixin could be used transparently as you could use the generic font-size. Even more, there are two ways to use it:

.foo
  font-size 1rem

.bar
  font-size 10

You can use rem unit there, that would be translated to pixels in a fallback, or use unitless number, that would be translated as you wanted it to be in your question. And the importance would be preserved and you’d even have a way to declare how much pixels are there in one rem using $rem_ratio variable.

Enjoy!