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

@mixin (믹스인) 정의

 

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

}