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

@mixin

기본적인 Mixin 선언은 아주 간단하다

@mixin 지시어를 이용하여 스타일을 정의한다.

mixin규칙을 이용해서 재사용가능한 내용들을 선언할 수 있다.

@mixin 믹스인이름{

스타일;

}

지금까지는 믹스인이름(){} 이런식으로 사용을 했지만 밖에서 들어오는 파라미터가 딱히 없는 경우 () 괄호를 생략할 수 있다.

@mixin large-text{
    font-size: 22px;
    font-weight: bold;
    font-family: sans-serif;
    color: orange;
}

이 SCSS로 작성된 코드를 Sass 문법으로 변환 해 보면

//Sass
= large-text
    font-size: 22px
    font-weight: bold
    font-family: sans-serif;
    color: orange

이렇게 볼 수 있다.

Mixin은 재활용이 가능한데 재활용이 되는 부분에서 &를 사용해서 부모의 개념이 &로 치환돼서 활용할 수 있다.

@mixin large-text{
    font: {
        size: 22px;
        weight: bold;
        family: sans-serif;
    }
    color: orange;
    &::after{
        content: "!!";
    }

    span.icon{
        background: url("/images/icon.png");
    }
}

우리는 font-size, font-weight, font-family를 위의 코드처럼 사용할 수 있다는 것을 학습했다.

그리고 우리는 현재의 코드로 &가 무엇으로 치환될 지 알 수 없다.

mixin이 include로 호출되어 사용되는 부분에 해당하는 선택자로 &가 치환될 것이다.

그리고 이 mixin이 포함되는 부분이 무엇이 될지 모르지만 무엇인가의 후손요소인 span요소에 icon이라는 클래스가 붙어있을 경우 background로 이런 url 을 적용하겠다는 의미이다.

@mixin large-text{
    font: {
        size: 22px;
        weight: bold;
        family: sans-serif;
    }
    color: orange;
    &::after{
        content: "!!";
    }

    span.icon{
        background: url("/images/icon.png");
    }
}

.box1{
    @include large-text;
}
.box2{
    @include large-text;
}

이제 sassmeister 에서 컴파일을 위해 box1과 box2에서 해당 mixin을 include 시켜서 컴파일된 코드를 확인해 보면

.box1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

.box1::after {
  content: "!!";
}

.box1 span.icon {
  background: url("/images/icon.png");
}

.box2 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

.box2::after {
  content: "!!";
}

.box2 span.icon {
  background: url("/images/icon.png");
}

위의 코드로 변환된 것을 확인 할 수 있다.

@include

선언된 mixin을 사용(포함)하기 위해서는 @include가 필요하다.

//SCSS
@include 미스인 이름;

//Sass
+믹스인이름

이런 형태로 사용할 수 있고

위에서 box1,2에서 사용했던것 처럼

//SCSS

h1{
    @include large-text;
}
div{
    @include large-text;
}

//Sass
h1
    +large-text
div
    +large-text

인수(Arguments)

Mixin은 함수(functions)처럼 인수(Arguments)를 가질 수 있다.

하나의 Mixin으로 다양한 결과를 만들 수 있다.

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

//Sass
=믹스인이름($매개변수)
    스타일

+믹스인이름(인수)

매개변수(Parameters)란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용된다. 제공되는 여러 데이터들을 전달인수(Arguments) 라고 부른다.

지금까지 파라미터와 인자를 헷갈렸는데 잘 알아둬야할 내용인 것 같다.

//SCSS:
@mixin dash-line($width, $color){
    border: $width dashed $color;
}

.box1{ @include dash-line(1px, red); }
.box2{ @include dash-line(4px, blue); }

mixin 부분에 dash-line이라는 mxin이름에 전달인수로 $width,와 $color 변수를 외부에서 받는다.

그리고 box1,2 에 include로 1px, red 라는 값을 우리는 인수(인자)라고 부른다.

그리고 이 값을 받아서

dash-line 내부에서 변수로 받아와 사용하는 이 변수를 매개변수라고 부른다.

즉 매개변수와 인수(인자)는 다른 개념이다.

 

 

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

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