Global base font size stylus variable

  • Hi.

    While working on our project here, it came up the need to test it with different font sizes to check witch we’ll choose to deploy with.

    I’ve looked up for some $base_font_factor = 1 stylus variable and could not found anything like that.

    Then I’ve came out with this @quasar.variables.styl:

    $percent_increase = 0.15
      size + (size*$percent_increase)
    // Classes afetadas
    $body-font-size          = calc(14px)
    $button-font-size        = calc(14px)
    $toolbar-title-font-size = calc(21px)
    $tooltip-fontsize        = calc(10px)
    $input-font-size         = calc(14px)

    It’s working ok and I can change (almost) all of my font sizes by some percent factor.

    The only catch here is the “almost”, because there are some classes that are not changed by stylus variables, like:

    .q-table tbody td {
      font-size: 13px;

    So… how can I apply the same percent factor on those missing classes?

    And… wouldn’t be a nice thing implement this kind of feature right into quasar?

    Thanks for any help, and for this great framework.

Log in to reply