4. Mixin

1. Mixin이란

2. Mixin 사용하기

@mixin 이름(매개변수) //생성
@include 이름(인수)  //사용

• 앞에 @Mixin을 쓰고 이름을 정해준 후, 중괄호 { } 안에 중복되는 코드를 넣어줍니다.

• @include를 사용하여 스타일 하고자 하는 요소에 포함 시키면 됩니다.

• mixin은 파일을 만들어서 import하여 사용하거나, mixin을 사용할 파일 내에서 선언 후 사용할 수 있습니다. 이때, 여러 개의 mixin을 만들어 사용한다면, _mixins.scss 파일을 만들어서 관리합니다.

.card {
	display: flex;
	justify-content: center;
	align-items: center;
	background: gray;
}

.aside {
	display: flex;
	justify-content: center;
	align-items: center;
	background: white;
}
/*.card와 .aside 클래스 선택자의 적용한 스타일이 겹침*/

// scss를 사용

@mixin center-xy{
	display: flex;
	justify-content : center;
	align-items : center;
}

.card{
	@include center-xy; // 정의한 center-xy mixin을 사용하여 코드 한줄이면 끝!
}

.aside{
	@include center-xy; 
}

3. Arguments

@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
} 
//background관련 스타일 코드가 들어있다.
//mixin의 인수에 따라 조금씩 다른 스타일링이 가능하다.

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat, center, center);
}

.box-one {
  @include image-style(url("/images/poster1.svg"), cover, no-repeat, 40%, 50%);
}

.profile {
  background-image: url("./assets/user.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.box-one {
  background-image: url(url("/images/poster1.svg"));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 40% 50%;
}

// 위에 코드를 가져와서 기본값을 설정해주었다.
@mixin image-style($ul, $size, $repeat, $positionX : 50%, $positionY : 50%) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
}

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat);
}
// profile과 .box-one은 서로 관계가 없지만, 코드가 중복되기때문에 mixin을 만들어서 
// 각 요소에서 사용합니다.

.profile {
  background-image: url("./assets/user.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

4. Content

// 정의하는 곳에서
@mixin sample{
	display: flex;
	justify-content: center;
	align-items: center;
  @content
}

// 사용하는 곳에서 (추가로 스타일링을 할 수 있음)
a {
	@include sample{
	    color: white;
	}
}

5. 전달인자 없는 믹스인

a {
	@include text-style;
}

6. Example

// Scss 
// box의 사이즈를 정해주는 mixin
@mixin size($width, $height, $padding){
	width : $width;
	height : $height;
	padding : $padding;
}

article{
	@include size(100%, 65px, 10px 20px);
}

/*CSS*/

article {
  width: 100%;
  height: 65px;
  padding: 10px 20px;
}

7. 전체 실습 코드