Funções no SASS

Nesta lição, vamos ver como usar funções. As funções são um pouco semelhantes a mixins, mas permitem adicionar parâmetros, que podem ter seus valores alterados.

Vamos criar uma função func que irá definir o tamanho da fonte. Deixe o tamanho ser passado como um parâmetro e que o parâmetro seja uma variável:

$font-size: 10px;

Em seguida, definimos o parâmetro na função $n e obrigatoriamente indicamos no corpo da função @return:

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

Resultado da compilação:

#main {
	font-size: 20px;
}

Também é possível passar um argumento nomeado para a função. Vamos reescrever as condições do exemplo anterior:

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

E no arquivo styles.css veremos o mesmo código:

#main {
	font-size: 20px;
}

Conte qual será o resultado da compilação do seguinte código:

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

Conte qual será o resultado da compilação do seguinte código:

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

Conte qual será o resultado da compilação do seguinte código:

$size: 2px;

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

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