creative
SASS
2019.09.19 21:20

Sass @mixin과 @include

조회 수 88 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

Sass @mixin and @include

Sass Mixins

 

@mixin 지시문을 사용하면 웹 사이트 전체에서 재사용 할 CSS 코드를 작성할 수 있습니다.

@include 지시문은 믹스 인을 사용 (포함) 할 수 있도록 만들어졌습니다.

 

 

Mixin 정의

@mixin name {
  property: value;
  property: value;
  ...
}

 

예제

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

팁 : 하이픈과 밑줄은 동일한 것으로 간주됩니다. 이것은 @mixin important-text {}와 @mixin important_text {}가 동일한 믹스 인으로 간주됨을 의미합니다!

 

Mixin 사용

.danger {
  @include important-text;
  background-color: green;
}

 

결과

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

 

Mixin은 다른 믹스인을 포함할 수 있다.

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

 

Mixin의 변수 전달

/* Define mixin with two arguments */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // Call mixin with two values
}

.myNotes {
  @include bordered(red, 2px); // Call mixin with two values
}

 

 

결과

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

 

Mixin 에서 사용되는 변수의 기본값 지정

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

 

.myTips {
  @include bordered($color: orange);
}

 

Mixin에서 Prefix 사용

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

 

결과

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 SASS Sass @while 2019.09.20 37
40 SASS Sass @for 2019.09.20 25
39 SASS Sass @each 2019.09.20 20
38 SASS Sass @if and @else 2019.09.20 12
37 SASS Sass Operators 2019.09.20 12
36 SASS Sass Introspection Functions 2019.09.19 36
35 SASS Sass Color Functions 2019.09.19 25
34 SASS Sass Selector Functions 2019.09.19 23
33 SASS Sass Map Functions 2019.09.19 57
32 SASS Sass List Functions 2019.09.19 49
31 SASS Sass Numeric Functions 2019.09.19 50
30 SASS Sass String Functions 2019.09.19 63
29 SASS Sass @extend 2019.09.19 61
» SASS Sass @mixin과 @include 2019.09.19 88
27 SASS Sass @import 2019.09.19 68
26 SASS Sass 중첩 규칙과 속성 2019.09.19 37
25 SASS Sass 변수 2019.09.19 46
24 SASS Sass 소개 2019.09.19 94
23 SASS SASS 샘플 2019.08.16 67
22 HTML ::after ::before 토글 사용 예제 2019.06.28 125
Board Pagination Prev 1 2 3 Next
/ 3

Menu