[basic] SCSS - @mixin (믹스인)・@include (인클루드)

1. @mixin / @include 정의
2. @mixin 구문
3. @include 구문
4. @mixin 예제 - (매개변수・독립변수) 설정
5. @mixin 예제 - 매개변수 기본값 정의
6. @mixin 예제 - Vendor prefix (브라우저 접두어)

@mixin / @include 정의

 

@mixin

웹사이트 전체에 걸쳐 재사용 가능한 CSS 코드 정의.

 

@include

@mixin 불러올 때 사용.

@mixin 구문

[구문]

 

@mixin name {

  property: value;

  property: value;

  ...

}

 

---

[예제]

 

@mixin important-text {

  color: red;

  font-size: 25px;

  font-weight: bold;

  border: 1px solid blue;

}

 

---

[Tip]

 

SASS 경우, - (하이픈)과 _ (언더바) 경우 동일 코드로 간주.

즉, 아래 두 코드는 동일한 코드로 간주됨.

@mixin important-text {  ... 

@mixin important_text { ...

 

@include 구문

[구문]

 

selector {

  @include mixin-name;

}

 

---

[예제] - 위에서 정의된 mixin을 인클루드 후 변환된 CSS.

 

[SCSS]

.danger {

  @include important-text;

  background-color: green;

}

 

[CSS]

.danger {

  color: red;

  font-size: 25px;

  font-weight: bold;

  border: 1px solid blue;

  background-color: green;

}

 

---

[Tip]

 

Mixin 경우, 믹스인 안에 다른 Mixin을 인클루드 가능.

(예제)

@mixin special-text {

    @include important-text;

    @include link;

    @include special-border;

}

 

@mixin 예제 - (매개변수・독립변수) 설정

SCSS 

 

@mixin bordered($color, $width) {

    border: $width solid $color;

}

. a {

    @include bordered(blue, 1px);

}

.b {

    @include bordered(red, 2px);

}

 

---

CSS

 

.a {

    border: 1px solid blue;

}

.b {

    border: 2px solid red;

}

 

@mixin 예제 - 매개변수 기본값 정의

SCSS

 

@mixin bordered($color: blue, $width: 1px) {

    border: $width solid $color;

}

.a {

    @include bordered($color: orange);

}

 

---

CSS

 

.a {

  border: 1px solid orange;

}

 

@mixin 예제 - Vendor prefix (브라우저 접두어)

SCSS

 

@mixin transform($property) {

  -webkit-transform: $property;

  -ms-transform: $property;

  transform: $property;

}

.a {

  @include transform(rotate(20deg));

}

 

---

CSS

 

.a {

  -webkit-transform: rotate(20deg);

  -ms-transform: rotate(20deg);

  transform: rotate(20deg);

}