SASSを書くのに最も適した方法はどれですか？

Question

SASSは、以下の2つの例に関して、どのようにコードを書いているのですか？両方とも同じCSSを出力する次の2つのオプションを参照してください。

@include breakpoint(large) { 
.bookhome{ 
padding-top: 0; }} 

または

.bookhome{ 
@include breakpoint(large) { 
padding-top: 0; }} 

Answer 1

私は、これは非常に主観的な問題だと思います。誰もが自分のCSSを構成するための自分の意見と好みを持っています。したがって、私は正しいか間違った答えがあるとは思わない。

個人的には、CSSセレクタ内でブレークポイントを次のようにネストして、ブレークポイント間でスタイルがどのように変わるかを一目で確認できるようにします。

.example { 
    // mobile 

    @include breakpoint(small) { 
     // tablet 
    } 

    @include breakpoint(medium) { 
     // desktop 
    } 

    @include breakpoint(large) { 
     // large desktop 
    } 

    &--modifier { 
     // mobile 

     @include breakpoint(small) { 
      // tablet 
     } 

     @include breakpoint(medium) { 
      // desktop 
     } 

     @include breakpoint(large) { 
      // large desktop 
     } 
    } 
}