[SASS/SCSS] 믹스인(Mixin) - 1 (선언,사용)

 

| 믹스인(Mixin)

- 스타일 그룹을 정의하여 사용

- 선언 @mixin

- 사용 @include

---

| 사용하기

<div>
  <p>안녕하세요. 지금은 <strong>Sass, Scss</strong>를 공부중입니다.</p>
</div>

| 인자가 없을 경우

//선언 [@mixin]
@mixin intro-txt{
  color: red;
  font:{
    size: 1.4rem;
    weight: bold;
  }
}

//사용 [@include]
div p strong{
  @include intro-txt
}

---

| 인자사용 (단일/다중)

//font 색상, 사이즈, 폰트의 두께를 인자로 받음
@mixin intro-txt($color, $size, $weight){
  margin: 0;
  color: $color;
  font:{
    size: $size;
    weight: $weight;
  }
}

div p strong{
  @include intro-txt(pink, 1.6rem, 100);
}

---

| 기본값

인자값이 없을 경우 기본값을 설정하여 출력

@mixin intro-txt($color: pink, $size: 1.4rem, $weight: 400){
  margin: 0;
  color: $color;
  font:{
    size: $size;
    weight: $weight;
  }
}

div p strong{
  @include intro-txt(red); 
}

폰트 색상만 전달 하였기때문에 font-size: 1.4rem; font-weight: 400으로 출력된다.

---

| 활용하기

border-radius, box-shadow등과 같은 곳에서 활용하여 사용하기 편함

- 브라우저마다 속성이 다름을 표현

// [default-radius] mixin을 추가
@mixin default-radius($radius){
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

div {
  padding: 1rem;
  border: 1px solid red;
  @include default-radius(6px)
  p strong{
    @include intro-txt(red);
  }
}