@function
Para definir una función en Sass usaremos la siguiente estructura: @function nombre([argumentos]){...}. Cuando vamos a invocar a una función los parámetros aun sin recibir ningún argumento de entrada son obligatorios.
@function fluidize(){ // @function nombreFuncion([arg])
@return 35%;
}
.sidebar {
width: fluidize();
}Si nos fijamos la definición de la función es igual que cuando definimos un mixin, pero en este caso tenga o no parámetros de entrada debemos usar los parámetros cuando invocamos a esta función.
@function fluidize($target, $context){
@return ($target/$context) * 100%;
}
.sidebar{
width: fluidize(350px, 1000px);
}¿Cuándo usar @function, @mixin y/o @extend?
mixin debe ser usado cuando definimos propiedades similares múltiples veces con pequeñas variaciones, por otro lado, extend cuando tenemos propiedades que son exactamente iguales, es decir, declaraciones copiadas una y otra vez. En cambio, las funciones son operaciones que necesitamos usar muchas veces y que nos devuelven un valor.
@mixin button($color, $rounded: true) {
color: $color;
@if $rounded == true {
border-radius: 4px;
}
}
.btn-a {
@include button(#000, false);
}En el ejemplo anterior, asignamos un border-radius si el mixin recibe el valor de cierto o lo toma por defecto. En el siguiente ejemplo, lo que estamos haciendo es que, si recibimos un valor de rounded, entonces le asignamos ese valor como border-radius:
@mixin button($color, $rounded: false) {
color: $color;
@if $rounded {
border-radius: $rounded;
}
}
.btn-a {
@include button(#000);
}
.btn-b {
@include button(#000, 4px);
}En este caso, a .btn-a no le estamos dando un border, pero en cambio a .btn-b sí, ya que le estamos pasando como segundo argumento un valor distinto de falso o nulo y por tanto entra en el if y le asigna el border-radius que estamos enviándole por parámetro.