Функцыі ў SASS

У гэтым уроке мы разгледзім, як выкарыстоўваць функцыі. Функцыі, чымсьці падобныя на прымешванне, але пры гэтым дазваляюць дадаваць параметры, якія могуць мяняць свае значэнні.

Давайце зробім функцыю func, якая будзе задаваць памер шрыфту. Хай памер перадаецца параметрам і ў якасці параметра будзе выступаць пераменная:

$font-size: 10px;

Затым прапісваем у функцыю параметр $n і абавязкова ўказваем у целе функцыі @return:

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

Вынік кампіляцыі:

#main {
	font-size: 20px;
}

Таксама ў функцыю можна перадаваць іменаваны аргумент. Перапішам умовы папярэдняга прыкладу:

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

І ў файле styles.css мы ўбачым той жа самы код:

#main {
	font-size: 20px;
}

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

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

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

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

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

$size: 2px;

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

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