[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 46회차 미션

패스트캠프 프론트앤드 인강 46일차 Sass(SCSS)의 함수(functions)과 함수를 사용할때 주의점에 대해 배워보았다.

함수(functions)

자신의 함수를 정의하여 사용할 수 있다.
함수와 Mixins은 거의 유사하지만 반환되는 내용이 다르다.

Mixin은 위에서 살펴본대로 지정한 스타일(style)을 반환하는 반면,
함수는 보통 연산된(Computed) 특정 값을 @return 지시어를 통해 반환한다.

 

//mixin
@mixin 믹스인이름($매개변수){
	스타일;
}

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

@function columns($number, $columns, $width){
	@return $width * ($number/$columns);
}

.container{
	$width:1200px;
	width:$width;
	.item:nth-child(1) {
		width:columns(1, 12, $width);		
	}
	.item:nth-child(2){
		width:columns(8, 12, $width);
		
	}
	.item:nth-child(3){
		width:columns(3, 12, $width);	
	}
}

함수를 사용할때 주의점

위와 같이 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와
내장 함수(Built-in Functions)의 이름이 충돌할 수 있다.
따라서 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이좋다

*내장함수란, 응용프로그램에 내장되어있으며 최종 사용자가 엑세스 할 수 있는 기능이다.
예를들어, 대부분의 스프레드 시트 응용 프로그램은 행이나 열의 모든 셀을 추가하는 내장 SUM함수를 지원한다.

예를들어, 색의 빨강 성분을 가져오는 내장함수로 이미 red()가 있다.
같은 이름을 사용하여 함수를 정의하면 이름이 충돌하기 대문에 별도의 접두어를 붙여 extra-red()같은 이름을
만들 수 있다.

 

//내가 정의한 함수
@function extra-red($color){
	//내장함수
	@return rgb(red($color), 0, 0);
}

div{
	color:extract-red(#D55A93);
}

혹은 모든 내장 함수의 이름을 다 알고 있을 수 없기 때문에 특별한 이름을 접두어로 사용할 수도 있다.
my-custom-func-red()

 

참고로 인수에 초기값을 모두 설정해주면 생략이가능하다

$width의 초기값도 설정되어있어서 생략가능.

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스