Consejos prácticos para usar los parámetros predeterminados de Sass CSS tricks

Funciones y mezclas proporcionadas por Sass aceptar parámetrosPuede usar los parámetros predeterminados de Sass, es decir. parámetros que no proporcionan un valor incluso al llamar a una función o mezcla.

Centrémonos en las mezclas aquí. Esta es la sintaxis de la mezcla:

@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
}

Es más seguro y más útil establecer parámetros predeterminados en esta combinación de Sass:

@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");
}

pero si quiero enviar $b y $cpero vete $a Como parametro por defecto para Sass?El numero es el que envias nombrada parámetro:

@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);
}

Un ejemplo del mundo real utilizando los parámetros predeterminados de Sass

Aquí hay una combinación rápida que resalta el estilo de desplazamiento muy básico que necesita (Kitty también tiene uno):

@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;
}

Ahora puedo llamarlo así:

.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);
}

Acabo de notar esto porque tuve que mirar alrededor para averiguarlo. Estoy tratando de enviar una cadena vacía o null como primer argumento para «perderlo», pero no funciona. Se debe crear un método con un parámetro con nombre.