[SASS] 6강 SASS의 @mixin과 @include - OSSAM강좌

 

 

 

** 영상으로 보실 분은 아래 주소를 클릭해주세요.

https://youtu.be/J2xSVTEyI0I

 

 

 

 

 

 

 

 

 

1. @mixin문법

- 웹사이트전체에 재사용할 CSS코드 정의하는 지시문

 

 

@mixin mixin명 {
  //재사용할 스타일 속성 지정
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. @include문법

- @mixin을 선택자에 포함하는데 사용하는 지시문

 

선택자{
  @include mixin명;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. @mixin과 @include를 이용한 기본 구문

1) 예시

- h3태그를 이용한 타이틀이 존재하고 다른 값은 모두 동일하고 글자색만 다르다고 가정해보자.

 

 

 

** HTML코드

<h3 class=“exhibition”>전시</h3>
<h3 class=“notice”>공지사항</h3>

 

 

 

** SCSS코드

@mixin h3Text{
    font-family: “Noto Sans kr”;
    font-size: 28px; font-weight: 700;
  }
  .exhibition{
    @include h3Text;
    color: #333;
  }
  .notice{
    @include h3Text;
    color: #FF0000;
  }

 

 

 

** 컴파일된 CSS코드

@charset "UTF-8";
.exhibition {
  font-family: “Noto Sans kr”;
  font-size: 28px;
  font-weight: 700;
  color: #333;
}

.notice {
  font-family: “Noto Sans kr”;
  font-size: 28px;
  font-weight: 700;
  color: #FF0000;
}

 

 

 

** 브라우저 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. @mixin을 중첩하여 새로운 @mixin만들기

1) 문법

@mixin 믹스인A {
	//재사용스타일설정
}

@mixin 믹스인B {
	//재사용스타일설정
}

@mixin 믹스인C {
	@include 믹스인A;
    	@include 믹스인B;
}

 

 

 

 

 

 

2) 예시

- h3태그를 이용한 타이틀이 존재하고 폰트설정과 박스설정을 따로 설정한 후 새로운 @mixin을 만들어보자

 

 

** HTML코드

<h3 class="exhibition">전시</h3>
<h3 class="notice">공지사항</h3>

 

 

 

** SCSS코드

@mixin h3Font{
    font-family: "궁서"; font-weight: bold; font-size: 30px;
}
@mixin h3Area {
    width: 300px; height: 50px;
    border: 3px solid navy;
}
@mixin h3Text {
    @include h3Font;
    @include h3Area;
}
.exhibition{
    @include h3Text;
    color: red;
}
.notice{
    @include h3Text;
    color: pink;
}

 

 

 

** 컴파일된 CSS코드

@charset "UTF-8";
.exhibition {
  font-family: "궁서";
  font-weight: bold;
  font-size: 30px;
  width: 300px;
  height: 50px;
  border: 3px solid navy;
  color: red;
}

.notice {
  font-family: "궁서";
  font-weight: bold;
  font-size: 30px;
  width: 300px;
  height: 50px;
  border: 3px solid navy;
  color: pink;
}

 

 

 

** 브라우저 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. @mixin에 매개변수 처리

- @mixin은 함수처럼 매개변수와 인수를 가질 수 있다.

- 매개변수를 사용하여 다양한 결과를 만들 수 있다.

 

 

1) 문법

@mixin 믹스인명($매개변수) {
	//재사용할 스타일
}
@include 믹스인명(인수);

 

 

 

 

 

 

 

2) 예시

- 3번에서 기본문법에서 사용했던 것을 매개변수를 사용하여 응용해보자.

- h3태그를 이용한 타이틀이 존재하고 다른 값은 모두 동일하고 글자색만 다르다고 가정해보자.

 

 

** HTML코드

<h3 class=“exhibition”>전시</h3>
<h3 class=“notice”>공지사항</h3>

 

 

 

** SCSS코드

@mixin h3Text($color) {
    font-family: “Noto Sans kr”;
    font-size: 28px; font-weight: 700;
    color: $color;
}
.exhibition {
    @include h3Text(#333);
}
.notice {
    @include h3Text(red);
}

 

 

 

** 컴파일된 CSS코드

@charset "UTF-8";
.exhibition {
  font-family: “Noto Sans kr”;
  font-size: 28px;
  font-weight: 700;
  color: #333;
}

.notice {
  font-family: “Noto Sans kr”;
  font-size: 28px;
  font-weight: 700;
  color: red;
}

 

 

 

** 브라우저 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. @mixin에 매개변수의 기본값 처리

- 매개변수는 기본값을 가질 수 있다.

- @include에서 별도의 인수가 전달되지 않으면 기본값이 사용된다.

 

 

1) 문법

@mixin 믹스인명($매개변수: 기본값) {
  //재사용할 스타일;
}

 

 

 

 

 

 

2) 예시

- h3태그에 테두리를 넣는데 굵기는 기본으로 1px, 스타일은 기본으로 solid, 색상은 기본으로 빨간색을 넣는다고 가정해보자

 

 

** HTML코드

<h3 class="exhibition">전시</h3>
<h3 class="collection">소장품</h3>
<h3 class="notice">공지사항</h3>
<h3 class="event">이벤트</h3>

 

 

 

** SCSS코드

@mixin border($w: 1px, $s: solid, $c: red) {
    width: 300px;
    border: $w $s $c;
}
.exhibition {
    @include border();
}
.collection{
    @include border(3px);
}
.notice {
    @include border(3px, dashed, green);
}
.event{
    @include border($s: dotted)
}

- [exhibition]은 인수 없이 처리

- [collection]은 굵기만 인수처리

- [notice]는 3개의 인수 모두 처리

- [event]는 키워드만 호출해서 값 변경

 

 

 

 

 

** 컴파일된 CSS코드

.exhibition {
  width: 300px;
  border: 1px solid red;
}

.collection {
  width: 300px;
  border: 3px solid red;
}

.notice {
  width: 300px;
  border: 3px dashed green;
}

.event {
  width: 300px;
  border: 1px dotted red;
}

 

 

 

** 브라우저 결과