Regla Sass @function

Las funciones pueden definir operaciones complejas en valores de SassScript que se pueden reutilizar en toda la hoja de estilo. Hace que sea más fácil abstraer las fórmulas y comportamientos comunes de alguna manera legible. Las funciones se pueden definir usando @function at-rule.

Sintaxis:

@function <function name>(<arguments...>) {
 ... 
}

Un nombre de función puede ser cualquier identificador Sass . Solo debe contener declaraciones universales, así como la regla @return at que indica el valor a usar como resultado de la llamada a la función. Las funciones normales de CSS se utilizan para funciones de llamada.

Ejemplo:

@function power($base, $expo)
  $result: 1
  @for $_ from 1 through $expo
    $result: $result * $base
  @return $result
  
.sidebar
  float: right
  margin-left: power(6, 2) * 2px

Producción:

.sidebar {
  float: right;
  margin-left: 64px;
}

Argumentos: Los argumentos permiten cambiar el comportamiento de la función cada vez que se les llama. Los argumentos se especifican en la regla @function después del nombre de la función, como se muestra en la sintaxis. Es simplemente una lista de nombres de variables entre paréntesis o corchetes. Las funciones siempre se llaman con el mismo número de argumentos que se encuentran en las expresiones SassScript . Los valores de estas expresiones están disponibles dentro del cuerpo de la función como las variables correspondientes.

Tipos de argumentos:

• Argumentos opcionales:
  Ejemplo:

  @function gfg($color, $amount: 100%) {   $geeks: change-color($color, $hue: hue($color) + 180);   @return mix($geeks, $color, $amount); }    $primary-color: #ffffff; .header {   background-color: gfg($primary-color, 80%); }

  Producción:

  .header {
    background-color: white;
  }
  

• Argumentos arbitrarios:
  Ejemplo:

  $lengths: 50px, 30px, 100px; .gfg {   width: max($lengths...); }

  Producción:

  .gfg {
    width: 100px;
  }
  

• Argumentos de palabras clave:
  Ejemplo:

  $geeks: green; .banner {   background-color: $geeks;   color: scale-color($geeks, $lightness: +40%); }

  Producción:

  .banner {
    background-color: green;
    color: #1aff1a;
  }
  

@return: la regla @return da el valor que se utilizará como resultado de la función llamada. Solo es válido en la regla @function , y cada @function debe terminar con @return . Cuando se llama a @return , finaliza inmediatamente la función y devuelve el resultado. Las devoluciones anticipadas son muy útiles para manejar casos extremos. También es útil en los casos en que se dispone de un algoritmo eficiente sin envolver toda la función en un bloque @else .
Ejemplo:

@function add($numbers...) {
  $add: 0;
  @each $number in $numbers {
    $add: $add + $number;
  }
  @return $add;
}
  
.gfg {
  width: add(50, 30, 100);
}

Producción:

.gfg {
  width: 180;
}