TIL | Sass mixin과 조건문

sass를 쓰고는 있는데... 확장자만 바꿨지 정작 기능은 하나도 쓰고 있지 않아서 이제부터 조금씩 실제 프로젝트에 적용해보려고 한다.

flexbox로 컨텐츠를 정렬하는데 짝수번 째 컨텐츠는 역순으로 배치하고 싶어서 간단한 조건문을 적용해보았다.

/* mixin */

//조건문 작성
@mixin list-order($val){
    @if $val == odd {
      flex-direction: row;
    }@else if $val == even {
      flex-direction: row-reverse;
    }
  }


//적용
.odd{
      @include list-order(odd);
}
.even{
      @include list-order(even);
}

---

https://sass-guidelin.es/ko/#mixins

Mixins

믹스인은 Sass 언어 전체에서 가장 많이 사용되는 기능 중 하나.

🔹 재사용성과 DRY 컴퍼넌트의 핵심
🔹 시맨틱한 클래스를 쓰지 않고도 재사용할 수 있는 스타일 정의 가능
🔹 과설계(over-engineering)는 금물, 간결성 유지
🔹CSS 규칙과 Sass 문서에서 허용되는 거의 모든 것을 포함할 수 있음. 함수처럼 매개변수도 가능.

조건문

@if @else 사용

가이드라인

• 필요한 경우가 아니라면 괄호 없이
• @if 앞에는 빈 새 줄 하나
• 여는 중괄호({) 뒤에는 줄 바꿈
• @else 문은 이전의 닫는 중괄호(})와 같은 줄에
• 다음 줄이 닫는 중괄호(})가 아닌 한 마지막 닫는 중괄호(}) 뒤에는 빈 새 줄 하나

@if 앞에는 빈 새 줄 하나라는데... mixin 안에 쓸 때도 써야하는 건가?!

---