A Practical Tip For Using Sass Default Parameters

Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don’t provide them when the function or mixin is called.

Let’s focus on mixins here. …


A Practical Tip For Using Sass Default Parameters originally published on CSS-Tricks. You should get the newsletter and become a supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don’t provide them when the function or mixin is called.

Let’s focus on mixins here. Here’s the syntax of a mixin:

@mixin foo($a, $b, $c) {
  // I can use $a, $b, and $c in here, but there is a risk they are null
}

.el {
  @include foo(1, 2, 3);

  // if I tried to do `@include foo;`
  // ... which is valid syntax... 
  // I'd get `Error: Missing argument $a.` from Sass
}

It’s safer and more useful to set up default parameters in this Sass mixin:

@mixin foo($a: 1, $b: 2, $c: 3) {
}

.el {
  // Now this is fine
  @include foo;

  // AND I can send in params as well
  @include foo("three", "little", "pigs");
}

But what if I wanted to send in $b and $c, but leave $a as the Sass default parameter? The trick is that you send in named parameters:

@mixin foo($a: 1, $b: 2, $c: 3) {
}

.el {
  // Only sending in the second two params, $a will be the default.
  @include foo($b: 2, $c: 3);
}

A real-life example using Sass default parameters

Here’s a quick-y mixin that outputs what you need for very basic styled scrollbars (Kitty has one as well):

@mixin scrollbars(
  $size: 10px,
  $foreground-color: #eee,
  $background-color: #333
) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // Standard version (Firefox only for now)
  scrollbar-color: $foreground-color $background-color;
}

Now I can call it like this:

.scrollable {
  @include scrollbars;
}

.thick-but-otherwise-default-scrollable {
  // I can skip $b and $c because they are second and third
  @include scrollbars(30px);
}

.custom-colors-scrollable {
  // I can skip the first param if all the others are named.
  @include scrollbars($foreground-color: orange, $background-color: black);
}

.totally-custom-scrollable {
  @include scrollbars(20px, red, black);
}

I’m just noting this as I had to search around a bit to figure this out. I was trying stuff like sending empty strings or null as the first parameter in order to “skip” it, but that doesn’t work. Gotta do the named parameter approach.


A Practical Tip For Using Sass Default Parameters originally published on CSS-Tricks. You should get the newsletter and become a supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2022-01-13T15:17:28+00:00) A Practical Tip For Using Sass Default Parameters. Retrieved from https://www.scien.cx/2022/01/13/a-practical-tip-for-using-sass-default-parameters/

MLA
" » A Practical Tip For Using Sass Default Parameters." Chris Coyier | Sciencx - Thursday January 13, 2022, https://www.scien.cx/2022/01/13/a-practical-tip-for-using-sass-default-parameters/
HARVARD
Chris Coyier | Sciencx Thursday January 13, 2022 » A Practical Tip For Using Sass Default Parameters., viewed ,<https://www.scien.cx/2022/01/13/a-practical-tip-for-using-sass-default-parameters/>
VANCOUVER
Chris Coyier | Sciencx - » A Practical Tip For Using Sass Default Parameters. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/13/a-practical-tip-for-using-sass-default-parameters/
CHICAGO
" » A Practical Tip For Using Sass Default Parameters." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2022/01/13/a-practical-tip-for-using-sass-default-parameters/
IEEE
" » A Practical Tip For Using Sass Default Parameters." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2022/01/13/a-practical-tip-for-using-sass-default-parameters/. [Accessed: ]
rf:citation
» A Practical Tip For Using Sass Default Parameters | Chris Coyier | Sciencx | https://www.scien.cx/2022/01/13/a-practical-tip-for-using-sass-default-parameters/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.