[SCSS] mixin 그리고 function(함수)

SCSS, SASS와 같은 CSS 전처리기에서는 mixin과 function을 사용할 수 있다. 차이점과 사용법에 대해 알아보자.

그나저나 CSS에서 함수를 왜...?

자바스크립트에서 함수를 사용하는 이유와 같다. 한 번 만들어두고 재사용 하기 위함이다.

@mixin, @function 차이점

@mixin은 지정한 스타일을 반환하고, @function은 값을 반환한다.

@mixin

선언

매개변수는 선택사항이다.

@mixin 이름($매개변수) {
	스타일 지정
}

호출

@include 이름(인수)

예제

어떤 요소의 기본 스타일을 지정할 때 사용하면 편리하다.

<div class="wrap">
  <div class="box box1">
	<p class="txt1"></p>
  </div>
  <div class="box box2">
  	<p class="txt2"></p>
  </div>
  <div class="box box3">
  	<p class="txt3"></p>
  </div>
</div>

SCSS

@mixin defualt-box {
	width: 30px;
	height: 50px;
   	border: 1px solid blue;
}

@mixin fw($weight) {
	@if ($weight == bold) 	
		font-weight: 700;
   	}	
    
	@else if $weight == 'light' {
		font-weight: 200;
	}
    
	@else {
		font-weight: 400;
	}
}

.box {
	@include defualt-box;
}
.box1 {
	height: 100px;
}

.txt1 {
	@include fw('bold');
}
.txt2 {
	@include fw('light');
}

CSS

위에 작성한 SCSS와 결과가 같다.

.box {
	width: 30px;
	height: 50px;
	border: 1px solid blue;
}
.box1 {
	height: 100px;
}

.txt1 {
	font-weight: 700;
}
.txt2 {
	font-weight: 200;
}

@function

선언

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

호출

함수이름(인수);

예제

SCSS

@function 내함수($들어오는값) {
	@return $들어오는값 * 100;
}

.square {
	width: 내함수(3px);
   	height: 내함수(5px);
}

CSS

위에 작성한 SCSS와 결과가 같다.

.square {
	width: 300px;
	height: 500px;
}