ფუნქციები 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);
}