title: Mixin for using variable fonts
body: <p>Possibly insoluble Sass/CSS problem: I am using a variable font but Chrome currently only supports <code>font-variation-settings</code> rather than being able to use <code>font-weight</code>, <code>font-style</code> etc I still want to use <code>font-weight</code> etc for old browsers that don’t support variable fonts.</p>
  
  <p>I don't want to have to type out two properties everytime I set a font-style or font-weight! So I came up with some mixins:</p>
  
  <pre><code>@mixin font-weight($weight) {
      font-variation-settings: "wght" $weight;
      font-weight: $weight;
  }
  
  @mixin oblique($angle) {
      font-variation-settings: "slnt" $angle;
      font-style: oblique #{$angle + deg};
  }
  </code></pre>
  
  <p>Obviously I will sometimes want to use both font-weight <em>and</em> oblique and you can’t set the same CSS property twice - it will just get overridden. So I came up with this </p>
  
  <pre><code>@mixin font-weight($weight) {
      --weight: #{$weight};
      font-variation-settings: "wght" var(--weight), "slnt" var(--angle, 0);
      font-weight: $weight;
  }
  
  @mixin oblique($angle) {
      --angle: #{$angle};
      font-variation-settings: "slnt" var(--angle), "wght" var(--weight, 400);
      font-style: oblique #{$angle + deg};
  } 
  </code></pre>
  
  <p>which kinda works except that defaulting to font-weight 400 isn’t ok - that is the default normal weight of browsers, but it doesn’t account for the fact that I will have probably set the font-weight somewhere else. I could just half give-up and make it a single mixin <code>@mixin weight-and-oblique($weight, $oblique)</code> but that is a horrible API to work with imo. Is there a solution?  </p>