자신의 함수를 정의하여 사용할 수 있다.
Function과 Mixin은 거의 유사하지만 반환되는 내용이 다르다.
Mixin은 지정한 Style을 반환하는 반면,
Function은 보통 연산된 특정 값을 @return
지시어를 통해 반환한다.
// Mixin
@mixin mixinname($매개변수) {
style;
}
// Function
@function functionname($매개변수) {
@return 값;
}
사용하는 방법에도 차이가 있다.
Mixin은 @include
지시어를 사용하는 반면,
Function은 함수이름으로 바로 사용한다.
// Mixin
@include mixinname(인수);
// Function
functionname(인수);
SCSS
$max-width: 980px;
@function columns($number: 1, $columns: 12) {
@return $max-width * ($number / $columns)
}
.box_group {
width: $max-width;
}
.box1 {
width: $columns(); // 1
}
.box2 {
width: columns(8);
}
.box3 {
width: columns(3);
}
⬇️
CSS
.box_group {
// 총 너비
width: 980px;
}
.box_group .box1 {
// 총 너비의 약 8.3%
width: 81.66667px;
}
.box_group .box2 {
// 총 너비의 약 66.7%
width: 653.33333px;
}
.box_group .box3 {
// 총 너비의 25%
width: 245px;
}
위와 같이 함수는 @include
같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in Functions)의 이름이 충돌할 수 있다.
따라서 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋다.
예를 들어, 색의 빨강 성분을 가져오는 내장 함수로 이미 red()
가 있다.
같은 이름을 사용하여 함수를 정의하면 이름이 충돌하기 때문에 별도의 접두어를 붙여 extract-red()
같은 이름을 만들 수 있다.
// 내가 정의한 함수
@function extract-red($color) {
// 내장 함수
@return rgb(red($color), 0, 0);
}
div {
color: extract-red(#D55A93);
}