Sass - Mixin

은채·2022년 9월 13일

Sass

목록 보기

3/6

Mixin

Mixin은 코드를 재사용하기 위해 만들어진 기능
선택자들 사이에서 반복되고 있는 코드들은 mixin을 사용하여 코드 반복 최소화
중복되는 코드는 mixin으로 만들어 놓고 원하는 선택자 블럭에 mixin을 include

사용하기

@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; 
}

⚠️ 반복하는 모든 코드를 하나의 mixin에 몰아넣어서 사용하는 건 바른 mixin 사용법 xxx

위에 코드처럼 스타일별로 나누어서 mixin을 만든다.
서로 연관 있는 스타일 속성끼리 묶어서 만들어야 좀 더 사용성이 높은 mixin을 만들 수 있다.

Arguments

1) 인수(Arguments)

mixin 이름 뒤에 인수를 넣어서 사용할 수 있으며, 일반 언어와 마찬가지로 매개변수와 인수의 개수가 같아야 함.
mixin에 매개변수를 사용하면, 능동적으로 스타일을 적용할 수 있다
mixin의 매개변수에 들어가는 인자들의 값에 따라 형태는 같지만 스타일이 조금씩 달라짐

@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($u);
  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%);
}

2) 기본값 설정

기본값을 설정하여 매개변수에 값이 들어오지 않을 때 기본으로 설정한 값을 사용

// 위에 코드를 가져와서 기본값을 설정해주었다.
@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을 만들어서 각 요소에서 사용

Content

@content를 사용하면 원하는 부분에 스타일을 추가하여 전달

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

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