@function
¿Cuándo usar @function, @mixin y/o @extend?

<< Directivas @if y @else >>

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.

<< Directivas @if y @else >>