TIL|Sass mixinと条件文

サスケをつけてるけど…拡張子を変えただけなのに、機能が一つもないので、今から実際のプロジェクトに少しずつ適用してみます.
flexboxを使用してコンテンツをソートしますが、偶数の2番目のコンテンツは逆順序で配置したいので、簡単な条件文を適用します.

/* 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コンポーネントのキー
🔹 シンボル化されたクラスを書き込むことなく、繰り返し使用可能なスタイルを定義できます.
🔹 過剰な設計を避け、簡潔性を保つ
🔹CSSルールとSassドキュメントで許可されているほとんどの内容を含めることができます.パラメータは関数のようにもできます.
条件文
@if@elseの使用
ガイドライン

を必要としない場合は、括弧

を持たない.

@ifの前に空の新しい行

があります.

の括弧({)を開いた後は改行

@else文と前の行の括弧(})の

次の行はカッコ(})ではなく、最後のカッコ(})の後ろに空の新しい行

があります.
@ifの前に空の新しい行があります...mixinで使う時も使うのかな?!