Search code examples
fontssassmixins

Sass Mixin optional parameters

I am writing this mixin below:

=font-placeholder($location, $name, $fallback: '', $fallback-style: '')
  %#{$location}-font
    font-family: "#{$name}", "#{$fallback}", $fallback-style

+font-placeholder($location: body, $name: FontName)

Instead of it outputting this:

%body-font {
  font-family: "FontName", "", "";

I want it to output this:

%body-font {
  font-family: "FontName";

Any help?

Solution

  • If the string doesn't need quotes, don't quote it. Then you won't have to unquote it later.

    What you need is a list of fonts, that way you won't have to worry about extra commas or empty strings.

    =font-placeholder($location, $fonts...)
  %#{$location}-font
    font-family: $fonts

+font-placeholder(body, FontName)
+font-placeholder(body, FontName, serif)
+font-placeholder(body, FontName, Arial, sans-serif)

    Should generate something like this:

    %body-font {
  font-family: FontName;

%body-font {
  font-family: FontName, serif;

%body-font {
  font-family: FontName, Arial, sans-serif;