1. 함수 정의

함수 정의

@function 함수이름($매개변수){
    @return 값;
}

mixin과 차이

mixin은 스타일을 반환해주고
함수는 값을 반환해준다.

2. 함수 호출

@function func($num){
    @return $num * 10;
}

.test{
    width: func(20px);
    height: func(10px);
    border-radius: 1px solid black;
}

위와 아래는 같은 내용

.test {
  width: 200px;
  height: 100px;
  border-radius: 1px solid black;
}

3. 함수명 중복 방지

SCSS는 미리 정의되어 있는 함수가 있는데 이에 대한 중복 방지를 위해서 접두어 같은것을 붙여서 사용하는게 좋다.

.test{
    color: red();	// red() SCSS에 정의되어 있는 함수
}