SASS - 4장 믹스인(Mixin)

믹스인(Mixin)

1. Mixin이란

Mixin은 코드를 재사용하기 위해 만들어진 기능입니다. 선택자들 사이에서 반복되고 있는 코드들은 Mixin을 사용하여 코드 반복을 줄입니다. 중복되는 코드는 Mixin으로 만들어 놓고 원하는 선택자 블럭에 Mixin을 include하면 됩니다.

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을 사용하여 코드 한줄이면 끝!
    background: gray;
}

.aside{
	@include center-xy;
    background: white;
}

⚠️ 반복하는 모든 코드를 하나의 mixin에 몰아넣어서 사용하는 건 바른 mixin 사용법이 아닙니다. 위에 코드처럼 스타일별로 나누어서 mixin을 만듭니다. 서로 연관 있는 스타일 속성끼리 묶어서 만들어야 좀 더 사용성이 높은 mixin을 만들 수 있습니다.

3. Arguments

3-1. 인수(Arguments)

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

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

3-2. 기본값 설정

기본값을 설정하여 매개변수에 값이 들어오지 않을 때 기본으로 설정한 값을 사용할 수 있도록 해줍니다.

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

//background관련 스타일 코드가 들어있다.
//mixin의 인수에 따라 조금씩 다른 스타일링이 가능하다.
.profile {
    @include image-style("./assets/user.jpg", cover, no-repeat);
}

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

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

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

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

.profile-2 {
  background-image: url("./assets/user.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 30% 30%;
}/*# sourceMappingURL=014_mixin.css.map */

4. Content

@content를 사용하면 원하는 부분에 스타일을 추가하여 전달할 수 있습니다.

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

.one {
    @include sample {
        color:white;
    }
    background-color: red;
}

5. 전달인자 없는 믹스인

믹스인은 매개변수를 가지지 않더라도 만들 수 있습니다. 전달인자가 없는 믹스인에서는 @ inlcude키워드에다가 믹스인 이름만 넣어주면 됩니다. 따로 괄호를 추가하지 않습니다.

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

출처 : 인프런 - [초급] 40분만에 훑어보는 Sass