CSS_sass 기초 3

▶️ 코드를 한단어로 축약하는 @mixin

  @mixin 버튼기본디자인() {
    font-size : 16px;
    padding : 10px;
  }

  .btn-green {
    @include 버튼기본디자인();
    background : green;
  }

1. @mixin이라고 쓰고,
2. 이름을 하나 지어주고 ( ){ } 붙이고,
3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열한다.

• 그럼 이제 밑에서 자유롭게 "@include mixin이름" 으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙된다.
• 아무튼 여러줄을 한 단어로 치환해서 쓰고싶을 때 쓰는 문법이 바로 @mixin 이다.

   @mixin 버튼기본디자인($매개변수) {
    font-size : 16px;
    padding : 10px;
    background : $인수;
  }

  .btn-green {
    @include 버튼기본디자인(#229f72);
  }

이렇게 mixin 명에 매개변수를 넣어 사용할 수도 있다.

---

▶️ @use와 언더바 파일

  @use 'reset.scss';

  @use '_reset.scss';

위는 reset.scss를 첨부한 것이고, 언더바를 포함하면 CSS파일로 따로 컴파일하지 말아달라는 의미이다.

  @use '_reset.scss';

  reset.$변수명;  /* 다른 파일의 변수쓰는법 */
  @include reset.mixin이름();  /* 다른 파일의 mixin쓰는법 */

언더바를 붙일경우 다음과 같이 scss내부에 있는 코드들을 위처럼 이름을 붙여서 가져다 쓸 수도 있다.

---

▶️ scss의 다른 기능들을 좀 더 공부하려면

https://heropy.blog/2018/01/31/sass/?source=post_page-----cc5d05e3b1e9----------------------

HEROPY님의 scss 가이드를 읽어보도록 하자.

---