Mixin의 사용

🙋Mixin이란?

sass에서 가장 많이 사용되는 기능, 재사용성이 크다.

• 선언 시: @mixin 사용
• 적용 시: @include 사용

@mixin alpha() {
  css styles;
}

p {
  @include alpha();
}

확장성 높이기
변수(variable)를 받아서 사용이 가능하다.

@mixin text-style-12() {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.005em;
}
@mixin text-style-13() {
  // 기존에 따로 변수 선언
  font-size: $font-size-13; 
  line-height: $line-height-13;
  letter-spacing: $letter-spacing-13;
}
@mixin text-style($size, $color: false) {
// default 값 지정
  @if ($size == 12) {
    @include text-style-12;
  }
  @if ($size == 13) {
    @include text-style-13;
  }
  @if (type-of($color) == color) {
    color: $color;
  }
}

@content 사용

@mixin을 사용하여 새로운 content를 넣어 주고 싶을 때 사용한다.
※ '@content'를 사용하지 않으면 오류가 발생한다.

@mixin beta() {
  @content;
}

@include beta() {
  css styles // @content로 지정한 곳에 이동
}

➕Mixin과 유사한 기능

@function

@mixin은 @inclue를 사용해야하지만 @function은 바로 사용 가능하다
@function은 코드를 반환하는 것이 아닌 값을 반환한다.

@function anything() {
  @return value;
}

Map의 사용
javascript의 obeject 개념과 유사하다.

$bla-map: (
  a: alpha,
  b: beta,
  c: gamma,
); // map의 선언

@function _something-value($key) {
  // map-get()은 sass제공 내장함수
  @return map-get($bla-map, $key); 
}

'%': placeholder

@mixin과 하는 일은 비슷하나 용도가 다르다
인자를 사용할 수 없어 확장성이 떨어지나 compile시 공통 속성(css)을 묶어준다.

• 선언 시: % 사용
• 적용 시: @extend 사용

%tag-base {
  // 공통 스타일
  @include inline-flexbox; // maxin으로 선언
  height: 20px;
  padding: 0 6px;
  font-weight: 700;
  border-radius: 4px;
}
.tag-red {
  @extend %tag-base;
  color: #fff;
  background-color: #f00;
}
.tag-green {
  @extend %tag-base;
  color: $fff;
  background-color: #0f0;
}