Funciones en SASS

En esta lección veremos cómo utilizar las funciones. Las funciones se asemejan en algo a los mixins, pero permiten añadir parámetros, que pueden cambiar sus valores.

Hagamos una función func que establezca el tamaño de la fuente. Deje que el tamaño se pase como parámetro y que el parámetro sea una variable:

$font-size: 10px;

Luego, en la función, escribimos el parámetro $n y obligatoriamente indicamos en el cuerpo de la función @return:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func(2);
}

Resultado de la compilación:

#main {
	font-size: 20px;
}

También se puede pasar un argumento nombrado a la función. Reescribamos las condiciones del ejemplo anterior:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func($n: 2);
}

Y en el archivo styles.css veremos el mismo código:

#main {
	font-size: 20px;
}

Explique, cuál será el resultado de la compilación del siguiente código:

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

Explique, cuál será el resultado de la compilación del siguiente código:

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

Explique, cuál será el resultado de la compilación del siguiente código:

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}