#18 - 함수 (@function / @return)

함수

@function은 특정 값을 @return을 통해 반환하는 것이다.

기본 구조

SCSS

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

/* 함수 사용 */
함수이름(인수)
함수이름()

 

---

 

함수 이름 주의사항

내장함수(기본적으로 프로그램에 내장되어있는 함수)가 있을 수 있음으로, 함수의 이름은 '접두어-함수()'형태를 가지는 것이 좋다.

바람직하지 않은 예

red는 #ff0000를 나타내는 내장함수이기 때문에, red로 함수를 지정하면 함수가 중복되게 된다. 따라서 아래 예시는 바람직하지 않다.

SCSS

@function red(){
	@return #e34835;
}
.class{
    color : red;
}

바람직한 예

위의 케이스를 벗어나기 위해 '접두어-함수()'형태를 가진 아래 예시는 바람직하다.

SCSS

@function color-red(){
	@return #e34835;
}
.class{
    color : color-red;
}

 

---

 

사용 예시

SCSS

$w:1000px;
@function size( $n ){
	@return $w / $n;
}
/* w(1000) /(나누기) 2가 적용 */
.class1{
	width:size(2);
	background-color:red;
}
/* w(1000) /(나누기) 5가 적용 */
.class2{
	width:size(5);
	background-color:blue;
}

Compile 된 CSS

.class1 {
    width: 500px; 
    background-color: red;
}
.class2 {
    width: 200px; 
    background-color: blue; 
}